/* TODO: make progress-bar dynamic based on the progress */
/* TODO: make grid wrapper dynamic  */

/* styles.css */
/*
@import 'assets/header.css';
@import 'assets/hero.css';
@import 'assets/footer.css'; 
*/
/* Reset default margins and use a clean font */

@import "assets/reset.css";
@import "assets/colors.css";

/* Center the app both horizontally and vertically */
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-color: var(--saphire-8);
  /* background-color: red; */

  /* text */
  color: var(--black-1, #000);
  font-family: "Inter", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.375rem; /* 122.222% */
}

button {
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  border: 2px dashed var(--saphire-7);
  color: var(--saphire-6);
  font-family: "Inter", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.375rem; /* 122.222% */
  padding: 16px 20px;
  flex: 1;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

button:hover {
  background-color: var(--saphire-7);
  color: var(--white-1);
}

button.active {
  color: var(--white-1);
  background-color: var(--saphire-7);
}

.set-button {
  background-color: var(--saphire-1);
}

.set-button:hover {
  background-color: var(--saphire-1);
  /* border-color: var(--white-1); */
}

.set-button.active {
  background-color: var(--saphire-1);
  border-color: var(--white-1);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.transparent-button {
  background: transparent;
  border: none;
}

.transparent-button:hover {
  background: transparent;
  color: var(--white-1);
}

.text-button {
  border: none;
  padding: 0;
  flex: none;
  background: transparent;
}

.text-button:hover {
  background: transparent;
  color: var(--white-1);
}

.text-button.active {
  background: transparent;
  color: var(--white-1);
}

.text-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--saphire-7);
  border: 2px dashed var(--saphire-6);
  border-radius: 0;
  color: var(--white-1);
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

.text-input:focus {
  outline: none;
  border-color: var(--white-1);
}

.text-input::placeholder {
  color: var(--babyblue);
}

select.text-input {
  cursor: pointer;
}

.ai-generation-content {
  overflow: hidden;
  transition: height 0.3s ease;
}

.ai-generation-content.collapsed {
  height: 0;
}

.ai-generation-settings {
  padding: 16px;
}

/* Spacing & Formatting */
/* Spacing & Formatting */
/* Spacing & Formatting */
/* Spacing & Formatting */
/* Spacing & Formatting */

.margin-6 {
  margin-bottom: 6px;
}

.margin-8 {
  margin-bottom: 8px;
}

.margin-12 {
  margin-bottom: 12px;
}

.margin-16 {
  margin-bottom: 16px;
}

.margin-20 {
  margin-bottom: 20px;
}

.margin-24 {
  margin-bottom: 24px;
}

.margin-28 {
  margin-bottom: 28px;
}

.h-margin-4 {
  margin-right: 4px;
}

.h-margin-20 {
  margin-right: 20px;
}

.padding-20 {
  padding: 20px;
}

.v-stack {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.h-stack {
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
}

.align {
  align-items: center;
}

.h-fit {
  width: fit-content;
}

.v-fit {
  height: fit-content;
}

.h-stack-gap-16 {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 8px;
}

.icon-wrapper svg {
  width: 24px;
  height: 24px;
  display: block;
}

.space-between  {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

/* Text */
/* Text */
/* Text */
/* Text */
/* Text */

.text {
  color: var(--black-1, #000);
  font-family: "Inter", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem;
}

.babytext {
  color: var(--black-1, #000);
  font-family: "Inter", sans-serif;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 500;
  /* line-height: 0.625rem; */
}

.text-white {
  color: var(--white-1, #ffffff);
}

.text-saphire {
  color: var(--saphire-6);
}

.text-saphire-7 {
  color: var(--saphire-7);
}

.text-blue {
  color: var(--saphire-1, #0510f5);
}

.text-babyblue {
  color: var(--saphire-2, #d4daf2);
}

.text-right {
  text-align: right;
}

.bg {
  background-color: var(--saphire-8);
}

.bg-saphire {
  background-color: var(--saphire-1);
}

.progress-text-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: var(--saphire-7);
  font-weight: 500;
  z-index: 3;
}

.progress-text-white {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  clip-path: inset(0 100% 0 0);
  font-weight: 500;
  z-index: 3;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--saphire-7);
  position: relative;
  z-index: 1;
  transition: width 0.3s ease-out;
}

.hero-text {
  color: transparent;
  font-size: 12.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 12.5rem */
  user-select: none;

  /* text-shadow: 0 0 20px var(--shadow-1, #0000000d); */
  -webkit-text-stroke: 2px var(--saphire-6);
  /* paint-order: stroke fill;   */
}

.utf-code-text {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  background-color: var(--saphire-1, #0510f5);
  pointer-events: none;
  color: var(--saphire-6);
  font-size: 0;
}

.utf-code-text:not(:empty) {
  font-size: 1.125rem;
  padding: 2px 6px;
}

.chip {
  display: inline-block;
  width: fit-content;
  padding: 3px 6px;
  background-color: var(--saphire-8);
}

/* App Components */
/* App Components */
/* App Components */
/* App Components */
/* App Components */

.app-wrapper {
  width: 100%;
  max-width: 1200px; /* Increased to accommodate left panel */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  /* background-color: aquamarine; */
}

.header {
  display: none; /* Hidden on desktop */
  padding: 16px 20px;
  background-color: var(--saphire-8);
  border-bottom: 2px dashed var(--saphire-7);
  z-index: 1000;
}

.mobile-menu-toggle {
  display: none;
  padding: 8px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
  height: 16px;
  position: relative;
}

.hamburger-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--white-1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.main-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 100%;
}

/* Left Panel */
.left-panel {
  width: 28%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--saphire-8);
  padding: 20px;
  position: relative;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.left-panel.collapsed {
  width: 60px;
  padding: 20px 10px;
}

.left-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

.left-panel.collapsed .left-panel-content {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.2s;
}

.sidebar-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.left-panel.collapsed .sidebar-toggle {
  top: 20px;
  right: 14px; /* Center in 60px width: (60 - 32) / 2 = 14px */
}

.sidebar-toggle-icon {
  transition: transform 0.3s ease-out;
  transform: rotate(-90deg); /* Point left when expanded */
}

.left-panel.collapsed .sidebar-toggle-icon {
  transform: rotate(90deg); /* Point right when collapsed */
}

.left-panel .v-stack {
  display: flex;
  flex-direction: column;
}

.left-panel-content > .v-stack:first-child {
  flex: 1;
  min-height: 0;
}

.left-panel v-stack {
  /* Removed transition: all to prevent weird animations */
}

.left-panel .v-stack > div:last-child {
  margin-top: auto;
  transition: margin-top 0.3s ease-out;
}

#export {
  flex-shrink: 0;
  flex-grow: 0;
  transition: margin-top 0.3s ease-out, transform 0.3s ease-out;
}

/* Right Content Area */
.right-content {
  width: 72%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.left-panel.collapsed ~ .right-content {
  width: calc(100% - 60px);
}

.top-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.top-row > #drawing-area {
  flex-shrink: 0;
  min-width: 0;
}

.top-row > v-stack {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 481px; /* Match large canvas width, will be updated dynamically */
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

/* Clear and Save buttons - fixed height, expand width */
.top-row > v-stack > button[id="clear"],
.top-row > v-stack > button[id="save-char"] {
  width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
}

/* Nav buttons container - match canvas max height */
.top-row > v-stack > v-stack.nav-buttons-container {
  height: 481px;
  display: flex !important;
  flex-direction: column !important;
}

/* Nav buttons - expand in both dimensions */
.top-row .nav-button {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.character-set-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

button[data-set] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 16px 20px;
}

button[data-set] .button-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
  transition: margin-bottom 0.3s ease-out;
}

button[data-set]:has(.button-grid-wrapper.collapsed) .button-header {
  margin-bottom: 0;
}

button[data-set] .button-counter {
  color: var(--saphire-6);
  transition: color 0.2s ease;
}

button[data-set]:hover .button-counter,
button[data-set].active .button-counter {
  color: var(--white-1);
}

.button-grid-wrapper {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out,
    margin 0.3s ease-out;
}

.button-grid-wrapper::-webkit-scrollbar {
  display: none;
}

.button-grid-wrapper.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
}

.section-toggle {
  width: 100%;
  text-align: left;
  padding: 0;
}

.section-toggle h-stack {
  width: 100%;
}

.section-toggle[data-toggle="character-sets"].collapsed
  icon-svg[name="chevron_bottom"],
.section-toggle[data-toggle="stroke"].collapsed icon-svg[name="chevron_bottom"],
.section-toggle[data-toggle="preview"].collapsed
  icon-svg[name="chevron_bottom"] {
  transform: rotate(-90deg);
  transition: transform 0.3s ease-out;
}

.section-toggle[data-toggle="character-sets"] icon-svg[name="chevron_bottom"],
.section-toggle[data-toggle="stroke"] icon-svg[name="chevron_bottom"],
.section-toggle[data-toggle="preview"] icon-svg[name="chevron_bottom"] {
  transition: transform 0.3s ease-out;
}

.stroke-settings {
  height: auto;
  transition: height 0.3s ease-out;
  overflow: hidden;
}

.stroke-settings-content {
  padding: 20px;
}

#character-sets-content {
  height: auto;
  transition: height 0.3s ease-out;
  overflow: hidden;
}

.character-sets-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stroke-settings.collapsed {
  height: 0;
  overflow: hidden;
}

#character-sets-content.collapsed {
  height: 0;
  overflow: hidden;
}

#preview-content {
  height: auto;
  transition: height 0.3s ease-out;
  overflow: hidden;
}

#preview-content.collapsed {
  height: 0;
  overflow: hidden;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
  gap: 8px;
  width: 100%;
}

.button-cell {
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  max-width: 26px;
  max-height: 26px;
  font-size: 0.875rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

button[data-set] .button-header {
  cursor: pointer;
  user-select: none;
}

/* .character-set-button {
  padding: 10px 12px;
  background: transparent;
  border: 2px dashed var(--saphire-7);
  color: var(--saphire-6);
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.character-set-button:hover {
  background-color: var(--saphire-7);
  color: var(--white-1);
}

.character-set-button.active {
  color: var(--white-1);
  background-color: var(--saphire-7);
} */

/* Stroke Settings */
.stroke-settings {
  display: flex;
  flex-direction: column;
}

.slider-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slider {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  background: transparent;
}

.slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(
      to right,
      var(--saphire-7) 0px,
      var(--saphire-7) 3px,
      transparent 3px,
      transparent 6px
    ),
    repeating-linear-gradient(
      to right,
      var(--saphire-9) 0px,
      var(--saphire-9) 3px,
      transparent 3px,
      transparent 6px
    );
  background-size: var(--slider-fill, 0%) 100%, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, repeat;
}

.slider::-moz-range-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--saphire-9) 0%,
    var(--saphire-9) 4px,
    transparent 4px,
    transparent 8px
  );
}

.slider::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--saphire-7) 0%,
    var(--saphire-7) 4px,
    transparent 4px,
    transparent 8px
  );
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--saphire-1);
  border: 3.5px dashed var(--saphire-7);
  cursor: pointer;
  margin-top: -4px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

#stroke-width::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--saphire-1);
  border: 3.5px dashed var(--saphire-7);
  cursor: pointer;
  margin-top: -4px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

#stroke-width:hover::-webkit-slider-thumb {
  border-color: var(--white-1);
}

.slider:hover::-webkit-slider-thumb {
  border-color: var(--white-1);
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--saphire-1);
  border: 3.5px dashed var(--saphire-7);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

#stroke-width::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--saphire-1);
  border: 3.5px dashed var(--saphire-7);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

#stroke-width:hover::-moz-range-thumb {
  border-color: var(--white-1);
}

.slider:hover::-moz-range-thumb {
  border-color: var(--white-1);
}

.progress-container {
  background: transparent;
  overflow: hidden;
  height: 48px;
  position: relative;
  border: 2px dashed var(--saphire-7);
}

#font-name {
  outline: none;
  cursor: text;
  border-bottom: 2px solid transparent;
}

#font-name:focus {
  border-bottom: 2px solid var(--saphire-1, #0510f5);
}

/* ---------- 1. Fixed-size container ---------- */
.grid-wrapper {
  width: 361px;
  height: 361px;
  overflow: auto; /* only vertical scroll */
  overflow-x: hidden; /* explicitly disable horizontal */
  /* border: 2px solid #ff0000; */
  box-sizing: border-box;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.grid-wrapper::-webkit-scrollbar {
  display: none;
}

/* ---------- 2. Grid definition ---------- */
.grid {
  /* ---- Variables for easy tweaking ---- */
  --total: 361px; /* container size */
  --cols: 7; /* visible columns */
  --gap: 6px; /* gap between cells */
  --gaps-total: calc((var(--cols) - 1) * var(--gap));
  --cell-size: calc((var(--total) - var(--gaps-total)) / var(--cols));

  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell-size));
  grid-auto-rows: var(--cell-size); /* <-- forces square cells on new rows */
  gap: var(--gap);
  min-width: 100%; /* prevent collapse */
  height: max-content; /* grow vertically as needed */
  padding: 0;
  box-sizing: border-box;
}

/* ---------- 3. Grid Cell styling ---------- */
.cell {
  background: transparent;
  /* border: 2px solid var(--saphire-7); */
  display: flex;
  align-items: center;
  justify-content: center;
  /* user-select: none; */
  aspect-ratio: 1 / 1;
  color: var(--saphire-6);
  cursor: pointer;
}

.cell:hover {
  /* border-color: var(--white-1); */
  color: var(--white-1);
}

.cell.completed {
  /* background: var(--saphire-7); */
  color: var(--white-1);
  /* border-color: var(--saphire-1, #0510f5); */
}

.cell.selected {
  background: var(--white-1);
  color: var(--saphire-1);
}

.drawing-area-wrapper {
  width: 481px; /* Always use large canvas size as base */
  height: 481px; /* Always use large canvas size as base */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-container {
  position: relative;
  background-image: 
    /* Vertical center line */ linear-gradient(
      to bottom,
      transparent calc(50% - 1px),
      var(--saphire-6-60) calc(50% - 1px),
      var(--saphire-6-60) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    /* Horizontal center line */
      linear-gradient(
        to right,
        transparent calc(50% - 1px),
        var(--saphire-6-60) calc(50% - 1px),
        var(--saphire-6-60) calc(50% + 1px),
        transparent calc(50% + 1px)
      ),
    /* Vertical thirds */
      linear-gradient(
        to bottom,
        transparent calc(33.333% - 1px),
        var(--saphire-6-40) calc(33.333% - 1px),
        var(--saphire-6-40) calc(33.333% + 1px),
        transparent calc(33.333% + 1px)
      ),
    linear-gradient(
      to bottom,
      transparent calc(66.667% - 1px),
      var(--saphire-6-40) calc(66.667% - 1px),
      var(--saphire-6-40) calc(66.667% + 1px),
      transparent calc(66.667% + 1px)
    ),
    /* Horizontal thirds */
      linear-gradient(
        to right,
        transparent calc(33.333% - 1px),
        var(--saphire-6-40) calc(33.333% - 1px),
        var(--saphire-6-40) calc(33.333% + 1px),
        transparent calc(33.333% + 1px)
      ),
    linear-gradient(
      to right,
      transparent calc(66.667% - 1px),
      var(--saphire-6-40) calc(66.667% - 1px),
      var(--saphire-6-40) calc(66.667% + 1px),
      transparent calc(66.667% + 1px)
    );
  background-color: var(--saphire-1);
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  cursor: crosshair;
  touch-action: none;
  z-index: 1;
}

.reference-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 1;
}

.pagination-button {
  display: flex;
  padding: 11px 16px;
  justify-content: center;
  align-items: center;
  background: var(--saphire-1, #0510f5);
  font-size: 1.25rem;
}

.pagination-button:hover {
  background: var(--saphire-2, #d4daf2);
  color: var(--saphire-1, #0510f5);
}

.control-button {
  display: flex;
  padding: 11px 16px;
  justify-content: center;
  align-items: center;
  background: var(--saphire-1, #0510f5);
}

.control-button:hover {
  background: var(--saphire-2, #d4daf2);
  color: var(--saphire-1, #0510f5);
}

.export-button {
  width: 100%;
  display: flex;
  padding: 11px 20px;
  justify-content: center;
  align-items: center;
  background: var(--saphire-8);
}

.export-button:hover {
  color: var(--white-1);
  transform: scale(1.005);
}

/* Preview Section */
#preview-section {
  width: 100%;
  margin-top: 0;
  flex-shrink: 0;
}

.preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--saphire-8);
  min-height: 100px;
  align-items: flex-start;
  padding: 4px;
}

.preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  position: relative;
}

.preview-item.active {
  opacity: 1;
}

.preview-canvas-wrapper {
  position: relative;
  display: inline-block;
}

.preview-label {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 0.625rem;
  color: var(--saphire-6);
  background-color: var(--saphire-8);
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
  transition: color 0.2s ease, background-color 0.2s ease;
  font-weight: 500;
  pointer-events: none;
  z-index: 2;
}

.preview-item:hover .preview-label {
  color: var(--white-1);
  background-color: var(--saphire-7);
}

.preview-item.active .preview-label {
  color: var(--white-1);
  background-color: var(--saphire-7);
  font-weight: 600;
}

.preview-canvas {
  background-color: var(--saphire-8);
  border: 2px dashed var(--saphire-7) !important;
  display: block;
}

.preview-item:hover .preview-canvas,
.preview-item.active .preview-canvas {
  border-color: var(--saphire-7) !important;
  border-width: 2px !important;
  border-style: dashed !important;
}

.preview-item.generated-kanji {
  position: relative;
}

.generated-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--saphire-7);
  color: var(--white-1);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--saphire-6);
  z-index: 10;
  pointer-events: none;
}

.preview-item.generated-kanji .preview-canvas {
  border-color: var(--saphire-6);
  border-style: dashed;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Tablet and below (1024px) */
@media (max-width: 1024px) {
  .main-container {
    flex-direction: row;
  }

  .left-panel {
    width: 28%;
  }

  .left-panel.collapsed {
    width: 60px;
  }

  .right-content {
    width: 72%;
  }

  .left-panel.collapsed ~ .right-content {
    width: calc(100% - 60px);
  }
}

/* Mobile and small tablets (768px) */
@media (max-width: 768px) {
  .app-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Show header on mobile */
  .header {
    display: flex;
    align-items: center;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .main-container {
    flex-direction: row;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure right-content and its children take full width */
  .right-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
  }

  /* Remove any margin/padding constraints on top-row and its containers */
  .right-content > * {
    width: 100%;
    max-width: 100%;
  }

  /* Ensure top-row takes full width and removes any constraints */
  .top-row.margin-20 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* Ensure all sections inside right-content take full width */
  .right-content > section {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove any horizontal padding/margin from body/html on mobile */
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Sidebar overlay on mobile */
  .left-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important; /* Use dynamic viewport height for mobile */
    width: 280px !important;
    max-width: 85vw !important;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px !important;
    min-width: unset !important;
    max-width: unset !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overflow: visible !important; /* Override base overflow: hidden */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Show sidebar when open */
  .left-panel.mobile-open {
    transform: translateX(0);
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .left-panel .left-panel-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: 100% !important;
    min-height: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Ensure space-between works on mobile sidebar */
  .left-panel.space-between {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  /* Override space-between height for mobile */
  .left-panel.space-between.mobile-open {
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* Ensure v-stack inside extends fully */
  .left-panel .left-panel-content > v-stack {
    flex: 1;
    min-height: 0;
  }

  /* Ensure toggle button doesn't shrink */
  .left-panel.mobile-open > .sidebar-toggle {
    flex-shrink: 0;
  }

  /* Ensure content can expand and fill space */
  .left-panel.mobile-open > .left-panel-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Backdrop overlay */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebar-backdrop.active {
    display: block;
    opacity: 1;
  }

  .right-content {
    width: 100% !important;
    flex: 1;
  }

  /* Hide sidebar toggle button on mobile (using header button instead) */
  .sidebar-toggle {
    display: none;
  }

  /* Reorganize top-row to column layout */
  .top-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Save button and drawing area v-stack comes first */
  .top-row > v-stack:last-child {
    order: 1;
    max-width: 100% !important;
    width: 100% !important;
    align-items: center;
    flex: 1 1 auto !important;
  }

  /* Show clear button above save button - only when moved */
  .top-row > v-stack:last-child > button[id="clear"].mobile-moved {
    order: 1;
    margin-bottom: 20px;
    width: 100%;
    max-width: 481px;
  }

  /* Save button comes after clear - only when clear button exists with mobile-moved class */
  .top-row
    > v-stack:last-child
    > button[id="clear"].mobile-moved
    ~ button[id="save-char"] {
    order: 2;
    margin-bottom: 20px;
  }

  /* Drawing area comes after buttons - only when clear is moved (use sibling selector) */
  .top-row
    > v-stack:last-child
    > button[id="clear"].mobile-moved
    ~ #drawing-area {
    order: 3;
  }

  /* Hide first v-stack on mobile when clear button is moved (it will be empty or only have moved nav) */
  .top-row > v-stack:first-child:has(> button[id="clear"].mobile-moved) {
    display: none !important;
  }

  /* Also hide if it only contains moved nav buttons */
  .top-row
    > v-stack:first-child:has(> .nav-buttons-container.mobile-moved):not(
      :has(> button[id="clear"]:not(.mobile-moved))
    ) {
    display: none !important;
  }

  /* Show nav buttons in their new location after drawing area */
  .top-row > v-stack:last-child .nav-buttons-container.mobile-moved {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    max-width: 481px;
    margin-top: 20px;
    height: auto;
    order: 4;
  }

  .top-row
    > v-stack:last-child
    .nav-buttons-container.mobile-moved
    .nav-button {
    flex: 1;
    height: 60px;
  }

  /* Hide nav buttons in their original location on mobile */
  .top-row > v-stack:first-child .nav-buttons-container.mobile-moved {
    display: none;
  }

  /* Drawing area wrapper adjustments */
  .drawing-area-wrapper {
    width: 100% !important;
    max-width: 481px;
    margin: 0 auto;
  }

  /* Adjust canvas container for mobile */
  .canvas-container {
    width: 100%;
    max-width: 481px;
  }

  /* Button spacing adjustments */
  .top-row > v-stack > button[id="save-char"] {
    margin-bottom: 20px;
  }

  .top-row > v-stack:first-child > button[id="clear"] {
    margin-bottom: 0;
  }

  /* Ensure drawing area has proper spacing */
  #drawing-area {
    margin-bottom: 0;
  }

  /* Nav buttons spacing when moved */
  .top-row > v-stack:last-child .nav-buttons-container.mobile-moved {
    margin-bottom: 0;
  }
}

/* Desktop - ensure original layout is restored */
@media (min-width: 769px) {
  /* Reset all order properties on desktop - elements should use natural DOM order */
  .top-row > v-stack > * {
    order: initial;
  }

  /* Ensure first v-stack is visible on desktop */
  .top-row > v-stack:first-child {
    display: flex !important;
  }

  /* Reset margins that might have been changed on mobile */
  .top-row > v-stack:last-child > button[id="clear"],
  .top-row > v-stack:last-child > button[id="save-char"] {
    margin-bottom: revert;
    width: revert;
    max-width: revert;
  }

  /* Hide nav buttons if they're still in the wrong location */
  .top-row > v-stack:last-child > .nav-buttons-container {
    display: none !important;
  }

  /* Ensure nav buttons are visible in their original location */
  .top-row > v-stack:first-child > .nav-buttons-container {
    display: flex !important;
    flex-direction: column !important;
    height: 481px;
  }

  /* Ensure clear button is visible in its original location */
  .top-row > v-stack:first-child > button[id="clear"] {
    display: block !important;
    margin-bottom: 20px;
  }

  /* Ensure save button and drawing area are in correct order in last v-stack */
  .top-row > v-stack:last-child > button[id="save-char"] {
    order: initial;
    margin-bottom: 20px;
  }

  .top-row > v-stack:last-child > #drawing-area {
    order: initial;
  }
}

/* Small mobile (480px) */
@media (max-width: 480px) {
  .left-panel {
    width: 50px;
    padding: 15px 8px;
  }

  .left-panel.collapsed .sidebar-toggle {
    right: 9px; /* Center in 50px width */
  }

  .drawing-area-wrapper {
    width: 100% !important;
    max-width: 100%;
  }

  .canvas-container {
    max-width: 100%;
  }

  /* Adjust button sizes for small screens */
  .top-row > v-stack > button[id="clear"],
  .top-row > v-stack > button[id="save-char"] {
    height: 50px;
    font-size: 1rem;
  }

  .top-row .nav-button {
    height: 50px;
  }
}