/*
  Global styles for the AI image generator app.
  The goal of this stylesheet is to mirror the layout of the ChatGPT mobile UI
  shown in the provided screenshot, with teal accents and a neon glow on
  actionable elements like buttons, pills and the prompt bar. The dark theme
  preserves high contrast against the glowing teal.
*/

/* CSS variables for colours and spacing */
:root {
  --bg-color: #000; /* dark background */
  --surface-color: #0a0a0a; /* slightly lighter for cards */
  --text-color: #ffffff; /* white text */
  /* Replace the red accent with an iridescent rainbow theme. The new
     palette includes blues, greens, purples, golds and teals that shift
     subtly across UI elements. We define a primary accent colour for
     solid elements (icons, borders) and a multi‑colour gradient for
     backgrounds and highlights. The glow colour is a light neutral
     tone to complement the rainbow hues. */
  --accent-color: #00ffff; /* cyan accent used for strokes and text */
  --accent-glow: rgba(0, 255, 255, 0.6); /* soft cyan glow */
  --gradient-colors: linear-gradient(45deg,
      #00ffff,
      #00ffcc,
      #8a2be2,
      #ff00ff,
      #00ff00,
      #ffd700,
      #00ffff
    );

  /* Alias old variable names to the new accent palette. The existing
     styles throughout the stylesheet reference `--teal` and
     `--teal-glow`. Rather than updating every usage, we map these
     legacy variables to the new accent variables. This ensures that
     any property still using `var(--teal)` or `var(--teal-glow)` will
     receive the updated rainbow colours. */
  --teal: var(--accent-color);
  --teal-glow: var(--accent-glow);
  --radius-pill: 24px;
  --radius-round: 50%;
  --padding: 1rem;
  --spacing-sm: 0.5rem;
}

/* DEBUG: remove all box-shadows to locate stray glow lines. Uncomment when testing */

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Use min-height to ensure the body fills the viewport, and use the new
     dynamic viewport height (dvh) unit on supported browsers. This
     prevents the prompt bar from slipping behind browser chrome on
     mobile devices. */
  min-height: 100vh;
  min-height: 100dvh;

  /* Prevent horizontal scrollbars. If any child element overflows
     horizontally, hide the overflow so the page does not scroll side
     to side. */
  overflow-x: hidden;
}

/* Container to simulate a phone frame */
/* Responsive mobile frame
   The frame now scales to the full width of the viewport on small
   devices, with a maximum width on larger screens. Height adjusts to
   the viewport height so content can scroll within the app. */
.mobile-frame {
  width: 100%;
  max-width: 450px;
  /* Set height using both vh and dvh. The second declaration using dvh
     will override the first on supported browsers, ensuring the frame
     fits within the visible viewport on mobile. */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 24px;
  background-color: var(--bg-color);
  /* Explicitly remove any shadow, border or outline so no teal lines
     appear around the container. */
  box-shadow: none;
  border: none;
  outline: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  /* Prevent horizontal scrolling on the frame itself. Without this,
     absolutely positioned elements (like the sidebar) can cause the
     page to shift side to side when the sidebar is toggled. */
  overflow-x: hidden;
}

/*
 * Overlays to conceal stray teal borders on the mobile frame
 *
 * Some browsers and combinations of box shadows produce faint teal lines
 * along the left and bottom edges of the mobile frame. We hide these
 * lines using absolutely positioned pseudo-elements that match the
 * background colour. The overlays have `pointer-events: none` so they
 * will not block clicks on underlying elements (e.g. the hamburger or
 * style menu buttons).
 */
.mobile-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--bg-color);
  pointer-events: none;
  z-index: 0;
}

.mobile-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background-color: var(--bg-color);
  pointer-events: none;
  z-index: 0;
}

/* Mask any residual teal lines along the left and bottom edges of the
   mobile frame by overlaying small strips that match the background. These
   pseudo-elements ensure that no unintended borders remain visible. */

/* Top bar layout */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--padding);
}

.top-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: var(--surface-color);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.8rem;
  position: relative;
  box-shadow: 0 0 8px var(--accent-glow);
}

.hamburger {
  width: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--accent-color);
  border-radius: 1px;
}

.app-label {
  /* Increase the size of the brand label and add a teal shadow for emphasis */
  font-size: 1.2rem;
  color: var(--text-color);
  margin-left: 0.4rem;
  /* Add a subtle glow around the text using teal */
  text-shadow: 0 0 8px var(--accent-glow);
}

.top-right {
  display: flex;
  gap: var(--spacing-sm);
}

.icon-button {
  background-color: var(--surface-color);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  box-shadow: 0 0 6px var(--accent-glow);
  cursor: pointer;
  transition: background-color 0.2s;
}
.icon-button svg {
  width: 20px;
  height: 20px;
}
.icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.icon-button:hover:not(:disabled) {
  background-color: var(--bg-color);
}

/* Heading */
.heading {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 2rem;
  font-size: 1.3rem;
  font-weight: 600;
}

/* New message styling for the simplified interface. This mirrors the heading
   styling but uses a distinct class so the markup can be updated without
   affecting other headings. */
.first-message {
  /* Center the introductory heading horizontally and provide
     meaningful vertical spacing. When no images are present, the
     heading will sit in the middle of the content area; when
     images are present, it remains at the top. */
  text-align: center;
  margin: 2rem 0;
  align-self: center;
  font-size: 1.3rem;
  font-weight: 600;
}

/* Feature buttons grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 0 2rem;
}
.feature-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-color);
  color: var(--text-color);
  border: 1px solid var(--teal);
  box-shadow: 0 0 6px var(--teal-glow);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.3s;
}
.feature-button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.feature-button:not([disabled]):hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px var(--teal-glow);
}
.feature-button svg {
  width: 28px;
  height: 28px;
  color: var(--teal);
}
.feature-button span {
  font-size: 0.8rem;
  white-space: nowrap;
}


/* Prompt bar */
.prompt-bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: var(--surface-color);
  /* Remove the teal divider line and rely on subtle shadow for separation */
  border-top: none;
  /* Subtle glow above the prompt bar to separate it from content */
  box-shadow: 0 -2px 8px var(--teal-glow);
  /* Remove rounded corners to avoid the appearance of a single big pill */
  border-radius: 0;
  /* Ensure the prompt bar stays visible at the bottom of the viewport when
     scrolling through history. Sticky positioning keeps it anchored */
  position: sticky;
  bottom: 0;
}
.prompt-bar .plus-btn {
  background-color: var(--surface-color);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  box-shadow: 0 0 6px var(--teal-glow);
  cursor: pointer;
  margin-right: 0.5rem;
  transition: background-color 0.2s;
}
.prompt-bar .plus-btn:hover {
  background-color: var(--bg-color);
}
.prompt-input {
  flex-grow: 1;
  background-color: var(--bg-color);
  border: 1px solid var(--teal);
  color: var(--text-color);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  box-shadow: 0 0 6px var(--teal-glow);
  margin-right: 0.5rem;
  outline: none;

  /* Allow the prompt area to expand vertically when the user types long
     text. The min-height keeps it comfortable for short prompts, while
     the max-height prevents it from taking over the entire screen.
     Overflow-y allows scrolling inside the textarea if the content
     exceeds the maximum height. Disable resize so it stays pill-shaped. */
  min-height: 3rem;
  max-height: 12rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  resize: none;
}
.prompt-input::placeholder {
  color: #6b6b6b;
}
.mic-btn,
.send-btn {
  background-color: var(--surface-color);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.5rem;
  margin-left: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  box-shadow: 0 0 6px var(--teal-glow);
  cursor: pointer;
  transition: background-color 0.2s;
}
.mic-btn:hover:not(:disabled),
.send-btn:hover:not(:disabled) {
  background-color: var(--bg-color);
}
.mic-btn:disabled,
.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Ensure new generate and download buttons inherit the same sizing,
   spacing and neon effects as the old mic/send buttons. They still
   leverage the base `.icon-button` styles for core colours and glow. */
.generate-btn,
.download-btn {
  margin-left: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive handling: scale frame on smaller screens */
@media (max-width: 420px) {
  .mobile-frame {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

/* Responsive adjustments for tablets and small laptops */
@media (min-width: 640px) {
  /* Expand the mobile frame slightly on larger screens while keeping
     the design centred and contained. Increase the radius for a
     softer card look. */
  .mobile-frame {
    max-width: 600px;
    border-radius: 32px;
  }
  /* Increase heading size and label for better readability */
  .app-label {
    font-size: 1.5rem;
  }
  /* Scale up icons on larger screens */
  .icon-button svg {
    width: 24px;
    height: 24px;
  }
  /* Increase the introductory message size */
  .first-message {
    font-size: 1.6rem;
  }
  /* Increase prompt input sizing for easier typing */
  .prompt-input {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
  }
  /* Allow more space for the prompt bar */
  .prompt-bar {
    padding: 0.75rem 1rem;
  }
  /* Widen the sidebar on medium screens */
  .sidebar {
    width: 60%;
    max-width: 340px;
  }
}

/* Responsive adjustments for desktops and wide laptops */
@media (min-width: 900px) {
  /* Further expand the frame on very large screens */
  .mobile-frame {
    max-width: 700px;
  }
  /* Increase padding on the top bar for visual balance */
  .top-bar {
    padding: calc(var(--padding) * 1.5);
  }
  /* Increase spacing around the prompt bar */
  .prompt-bar {
    padding: 1rem 1.5rem;
  }
  /* Make the style menu taller on large screens */
  .style-menu {
    max-height: 50%;
  }
  /* Sidebar width adjustment */
  .sidebar {
    width: 50%;
    max-width: 400px;
  }
}

/* Content area grows to fill available height and allows scrolling for
   history of generated images. */
.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Ensure that absolutely positioned children (like the empty state)
     are positioned relative to this container */
  position: relative;
  /* Prevent any horizontal scroll within the content */
  overflow-x: hidden;
  /* Align children horizontally centered. Vertical centering will be
     controlled by auto margins on the first message. */
  align-items: center;

  /* Hide default scrollbars on WebKit-based browsers */
  scrollbar-width: none; /* Firefox */
  /* Make track and thumb the same colour as the background to avoid
     visible scrollbars in browsers that honour scrollbar-colour */
  scrollbar-color: var(--bg-color) var(--bg-color);
}

/* Hide scrollbars on WebKit browsers for the content area */
.content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Adjust the output container to display images in a column with spacing
   and allow it to scroll if there are many images. */
.output {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem;
  overflow-y: auto;
  width: 100%;

  /* Hide scrollbars for the output container as well */
  scrollbar-width: none; /* Firefox */
  /* Make track and thumb the same colour as the background */
  scrollbar-color: var(--bg-color) var(--bg-color);
}

/* Hide scrollbars on WebKit browsers for the output container */
.output::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* Ensure images inside the output container have consistent styling */
.output img {
  max-width: 100%;
  border-radius: 12px;
  /* Remove the full border on images to avoid the appearance of two
     nested boxes. The left border is supplied by the .image-container
     wrapper instead. */
  border: none;
  /* The card container applies the shadow; remove from the image itself */
  box-shadow: none;
}
/* Loading and error messages inside the output maintain the neon colour */
.output .loading {
  color: var(--teal);
  font-size: 0.9rem;
  text-align: center;
  margin: 0.5rem 0;
}

/* Container for generated images. The left border and padding make the
   image stand out against the dark background. The box shadow adds
   a subtle glow consistent with other UI elements. */
.image-container {
  /* Remove the left border so there is no visible box around the image.
     Apply a consistent box shadow around the entire card. */
  padding: 0;
  margin: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 12px var(--teal-glow);
  position: relative;
  overflow: visible;
}

/* Controls overlay for each image card. These buttons are positioned
   near the bottom right of the card and allow remixing or downloading
   the individual image. */
.image-controls {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

/* Base styles for the per-image action buttons */
.image-remix-btn,
.image-download-btn {
  background-color: var(--surface-color);
  border: none;
  border-radius: 50%;
  padding: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  box-shadow: 0 0 6px var(--teal-glow);
  cursor: pointer;
  transition: background-color 0.2s;
}

.image-remix-btn:hover,
.image-download-btn:hover {
  background-color: var(--bg-color);
}

/*
 * Empty state styling
 * This section contains the call‑to‑action displayed before any images
 * have been generated. It is centered within the content area and
 * includes preset prompt buttons. When an image is generated the
 * empty state is hidden via JavaScript.
 */
.empty-state {
  /* Position absolutely within the content area so it can be centered
     regardless of other elements. The transform centers it
     horizontally and vertically relative to its own size. */
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 80%;
  max-width: 90%;
  z-index: 5;
}

.empty-state .first-message {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-color);
  text-shadow: 0 0 8px var(--teal-glow);
}

.preset-prompts {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.preset-btn {
  background-color: var(--surface-color);
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: 0 0 6px var(--teal-glow);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.preset-btn:hover {
  background-color: var(--bg-color);
  box-shadow: 0 0 12px var(--teal-glow);
}

/* Sidebar styles for the hamburger menu
   The sidebar is hidden off‑canvas by default and slides in when the
   `.open` class is applied. It appears on the left side of the mobile
   frame with a dark surface, teal border, and soft glow. */
.sidebar {
  /* Hidden off-canvas by default; left translation hides it off screen. */
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 70%;
  max-width: 260px;
  /* Gradient background from deep black to dark teal without transparency
     so content behind the sidebar isn't visible */
  background: linear-gradient(135deg, #001010 0%, #003e3e 100%);
  /* When the sidebar is closed, hide the right border and remove any
     box-shadow to prevent a teal line showing on the left side of the app.
     The border and glow will be added back when `.open` class is applied. */
  border-right: none;
  box-shadow: none;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* When open, slide the sidebar into view */
.sidebar.open {
  transform: translateX(0);
  /* Only show the teal border when the sidebar is open */
  border-right: 1px solid var(--teal);
  /* Add the glow back when the sidebar is open */
  box-shadow: 0 0 12px var(--teal-glow);
}

/* Content inside the sidebar */
.sidebar-content h2 {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--teal);
  text-shadow: 0 0 6px var(--teal-glow);
}
.sidebar-content p {
  font-size: 0.85rem;
  color: var(--text-color);
  line-height: 1.4;
}

/* Style menu for art styles
   The style menu is hidden by default and toggled with the `.open` class.
   It sits above the prompt bar, spans most of the width, and allows
   scrolling through many items. */
.style-menu {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 4.5rem; /* roughly above the prompt bar */
  max-height: 40%;
  background-color: var(--surface-color);
  border: 1px solid var(--teal);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 10px var(--teal-glow);
  padding: 0.5rem;
  overflow-y: auto;
  display: none;
  z-index: 30;
}
.style-menu.open {
  display: block;
}
.style-menu ul,
.style-menu li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.style-item {
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.2s;
}
.style-item:hover {
  background-color: var(--bg-color);
}

/* Close button for sidebar */
.close-sidebar-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: var(--teal);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  text-shadow: 0 0 6px var(--teal-glow);
}
.close-sidebar-btn:hover {
  color: var(--text-color);
}