body.auth-page {
  background: #000;
  background-image: 
    linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 2em 2em;
  background-position: 0 0;
  image-rendering: crisp-edges; /* For Firefox */
  image-rendering: pixelated; /* For Chrome/Safari */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
}
 
.auth-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;
  margin: 20px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
}

.auth-container:last-of-type {
  margin-bottom: 0;
}

.auth-header {
  text-align: center;
  margin-bottom: 30px;
}

.auth-header h2 {
  font-size: 24px;
  line-height: 1.5;
  text-wrap: balance;
  color: #fff;
  font-family: 'Space Mono', monospace;
  letter-spacing: -0.02em;
}

.auth-header h1 {
  font-size: 28px;
  color: #fff;
  font-family: 'Space Mono', monospace;
  letter-spacing: -0.02em;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-family: 'Space Mono', monospace;
}

.field input[type="email"],
.field input[type="text"],
.field input[type="password"] {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  transition: all 0.2s ease;
}

.field input[type="email"]:focus,
.field input[type="password"]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.actions input[type="submit"] {
  width: 100%;
  padding: 12px;
  background: #FF912D;
  color: #000;
  border: none;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.actions input[type="submit"]:hover {
  background: #ff9f47;
}

.auth-links {
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.auth-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-family: 'Space Mono', monospace;
  transition: all 0.2s ease;
  display: inline-block;
  /* border-bottom: 1px solid rgba(255, 255, 255, .4); */
  padding-bottom: 2px;
  background-color: rgba(255, 255, 255, 0.18);
  padding: 8px 12px;
  border-radius: 5px;
}

.auth-links a:hover {
  color: #ff9f47;
}

.field input[type="checkbox"] {
  margin-right: 8px;
}

.field input[type="checkbox"] + label {
  display: inline;
  color: rgba(255, 255, 255, 0.7);
}
 

/* For the remember me checkbox */
.field input[type="checkbox"] {
  margin-right: 8px;
}

/* For error messages */
#error_explanation {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid rgba(248, 81, 73, 0.2);
  border-radius: 4px;
  background-color: rgba(248, 81, 73, 0.1);
  color: #f85149;
  font-family: 'Space Mono', monospace;
}

#error_explanation h2 {
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: normal;
  color: #f85149;
  line-height: 1.4;
}

#error_explanation ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: none;
}

#error_explanation ul li {
  font-size: 13px;
  margin-bottom: 5px;
  position: relative;
}

#error_explanation ul li:before {
  content: "•";
  position: absolute;
  left: -15px;
  color: rgba(248, 81, 73, 0.5);
}

/* Small helper text */
.password-hint {
  text-align: left;
  margin-top: 8px;
}

.small {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
  display: inline-block;
}

.forgot-password {
  text-align: left;
  margin-top: 8px;
}

.forgot-password a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

.forgot-password a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.auth-links .horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-direction: row;
}

.auth-links .horizontal .separator {
  color: rgba(255, 255, 255, 0.3);
}

.danger-container {
  border: 1px solid rgba(248, 81, 73, 0.2);
  
}

.danger-container .auth-header h2 {
  color: #f85149;
}

.danger-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 20px;
  text-align: center;
}

.delete-account-button {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.3);
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delete-account-button:hover {
  background: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.5);
}

.password-hint {
  margin-top: 4px;
  margin-bottom: 8px;
}

.password-hint .small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.field label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.field + .field {
  margin-top: 24px;
}

.actions {
  margin-top: 32px;
}

.danger-container .auth-header {
   margin-bottom: 12px;
}
.danger-container .auth-header h2 {
  font-size: 18px;
  color: #f85149;
}

.back-to-home {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
  font-family: 'Space Mono', monospace;
  margin-bottom: 0px;
  transition: color 0.2s ease;
}

.back-to-home:hover {
  color: rgba(255, 255, 255, 0.9);
}

.back-to-home svg {
  width: 16px;
  height: 16px;
}

.secondary-actions {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logout-button {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.logout-button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.auth-page-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px 60px;
  width: 100%;
}

.pricing-details {
}

.pricing-details h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 15px;
}

.pricing-details ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 40px 0;
}

.pricing-details li {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
  text-align: left;
}

.pricing-details li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #00ff6a;
}

.price {
  font-size: 24px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}

#card-element {
  background: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  margin-top: 15px;
  color: white;
}

/* Ensure Stripe card element text is white */
.StripeElement {
  color: white !important;
}

.StripeElement--focus {
  border-color: rgba(255, 255, 255, 0.3);
}

#card-errors {
  color: #f85149;
  margin-bottom: 20px;
  font-size: 14px;
}
 

/* Renamed from cancel-subscription-button and made default style gray */
.membership-action-button {
  background: rgba(128, 128, 128, 0.1); /* Gray background */
  color: #808080; /* Gray text */
  border: 1px solid rgba(128, 128, 128, 0.2); /* Gray border */
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 20px;
  display: inline-block; /* Ensure buttons align properly if needed */
  text-align: center;
  font-weight: 500;
}

.membership-action-button:hover {
  background: rgba(128, 128, 128, 0.2);
  border-color: rgba(128, 128, 128, 0.3);
}

/* Modifier class for red buttons */
.membership-action-button.red {
  background: rgba(255, 65, 65, 0.1);
  color: #ff4141;
  border: 1px solid rgba(255, 65, 65, 0.2);
}

.membership-action-button.red:hover {
  background: rgba(255, 65, 65, 0.2);
  border-color: rgba(255, 65, 65, 0.3);
}

.upgrade-button {
  display: inline-block;
  width: 100%;
  padding: 12px;
  background: #FF912D;
  color: #000;
  border: none;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
  margin-top: 15px;
}

.upgrade-button:hover {
  background: #ff9f47;
}

.submit-button {
  display: inline-block;
  width: 100%;
  padding: 12px;
  background: #00ff6a;
  color: #000;
  border: none;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
  margin-top: 15px;
}

.submit-button:hover {
  background: #2aff7e;
}

.subscription-status {
  text-align: center;
 
}

.subscription-status .free-plan {
  color: red;
}


.subscription-status-backdrop {
 
}

.subscription-status h3 {
  margin-bottom: 15px;
  color: #fff;
}
 

.subscription-status.active h3 {
  color: #00ff6a;
}

.field select {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.field select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
}

.field select option {
  background-color: #000;
  color: #fff;
}

.setting-hint {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-family: 'Space Mono', monospace;
}

 

.auth-container.auth-confirm-email ul.list-disc.list-inside {
  padding-left: 20px;
  list-style: disc;
  font-size: 75%;
  line-height: 1.2;
}

.auth-container.auth-confirm-email ul.list-disc.list-inside li:not(:last-child) {
  margin-bottom: 11px;
}


.auth-container.auth-confirm-email p {
  margin-bottom: 20px;
}

.auth-container.auth-confirm-email p.lol {
  font-size: 75%;
  opacity: 0.6;
}

.auth-container.auth-confirm-email p.mt-2 {
  margin-top: 20px;
}

.auth-container.auth-confirm-email {
  max-width: 500px;
  line-height: 1.4;
}

.auth-container.auth-confirm-email .help-section {
 display: none;
}

.auth-container.auth-confirm-email .auth-links {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  margin-top: 30px;
}

.auth-container.auth-confirm-email p.mini {
  font-size: 87%;
  opacity: .9;
}

.auth-container.auth-confirm-email p.help {
  cursor: pointer;
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  display: inline-block;
  border-radius: 3px;
  padding: 6px 12px;
  transition: all 0.2s ease;
}

.auth-container.auth-confirm-email p.help:hover {
  background: rgba(255,255,255,0.5);
}

.auth-container.auth-confirm-email .help-section {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.auth-container.auth-confirm-email .help-section[style*="display: block"] {
  opacity: 1;
}

.auth-container.auth-confirm-email .help-section ul li { 
  color: #8f8f8f;
}

.auth-container.auth-confirm-email .help-section p:first-child {
  margin-bottom: 0;
}


.auth-container.auth-confirm-email .help-section p.mb-0 {
  margin-bottom: 0;
}
 
.auth-container.auth-confirm-email  .almost-green {
  color: #00ff59;
  text-shadow: 2px 0px 10px #30ff33;
  font-size: 120%;
}

.auth-container.auth-confirm-email  .almost-yellow {
  color: #00ff59;
  text-shadow: 2px 0px 10px #00ff59;
}

.auth-container.auth-confirm-email  .help-section form#new_user {
  margin-top: 12px;
}

.current-avatar img {
  max-width: 180px;
}


.auth-container h3.roast {
  line-height: 1.4;
  font-size: 80%;
  margin-top: 17px;
  opacity: .6;
  text-wrap: balance;
}

.oauth-buttons {
  margin: 20px 0;
  text-align: center;
}

.auth-container .oauth-account-info {
  text-align: center;
}

.auth-container .account-username {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 8px 16px 11px;
  font-weight: bold;
  margin-top: 16px;
  text-decoration: none;
  color: white;
  transition: background-color 0.2s ease;
  border: 1px solid #fff;
   }

   .auth-container .account-username:hover {
  background-color: rgba(255, 255, 255, 0.2);
   }

   .auth-container .continue-button {
  width: 100%;
  border: 1px solid #fff;
  font-size: 16px;
  font-weight: normal;
      display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
 border-radius: 4px;
   padding: 10px;
   background-color: #000;
   color: #fff;
   cursor: pointer;
   font-weight: bold;
   }

   .auth-container svg.continue-button-logo {
  height: 21px;
  width: auto;
   }

   .auth-container .mini-auth-header {
  margin-bottom: 20px;
  font-size: 17px;
   }

   .auth-container div#email-form-container {
  border-top: 1px solid rgb(255 255 255 / 40%);
  padding-top: 30px;
  margin-top: 30px;
   }

   .auth-container .oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
   }

/* Avatar section styling */
.current-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.avatar-preview {
  max-width: 180px;
  max-height: 180px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 15px;
}

.remove-avatar-button {
  background-color: rgba(248, 81, 73, 0.1);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.3);
  border-radius: 4px;
  padding: 8px 16px;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.remove-avatar-button:hover {
  background-color: rgba(248, 81, 73, 0.2);
  border-color: rgba(248, 81, 73, 0.5);
}

.profile-picture-field {
  margin-top: 10px;
}

.avatar-upload {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Space Mono', monospace;
  margin-top: 8px;
}

.avatar-upload::-webkit-file-upload-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  padding: 8px 12px;
  margin-right: 10px;
  font-family: 'Space Mono', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-upload::-webkit-file-upload-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.avatar-upload::file-selector-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  padding: 8px 12px;
  margin-right: 10px;
  font-family: 'Space Mono', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-upload::file-selector-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.field.profile-picture-field label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.field.profile-picture-field .small {
  display: block;
  margin-top: 8px;
  line-height: 1.4;
}

/* Google Auth Button */

.continue-google-logo {
  width: 18px;
  height: 18px;
}

.pricing-details h4 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 16px;
  font-weight: 600;
}


.pricing-details  {
  font-size: 15px;
  line-height: 1.4;
  padding: 30px 0 0;
  border-top: 1px solid rgb(255 255 255 / 30%);
  margin-top: 30px;
}

.pricing-details h5 {
  font-size: 18px;
  text-align: left;
  margin-top: 30px;
}

.auth-container.has-h1-absolute {
  margin-top: 64px;
}

.auth-header h1 {
  font-size: 24px;
  width: 100%;
  position: relative;
  display: block;
  top: -70px;
  color: rgba(255,255,255,0.6);
}


.trial-offer {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 32px;
  padding-bottom: 15px;
}

.trial-offer strong {
  font-weight: bold;
  color: #00ff6a;
}

.cancel-subscription-info {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 15px;
  line-height: 1.4;
}

.churn-fighter-img {
  display: block;
  max-width: 200px; /* Adjust as needed */
  margin: 15px auto 15px; /* Center and add space */
  border-radius: 4px;
}

/* Styles for the pro pitch list items */
.pricing-details li .pitch-item-main {
  /* Main text style (mostly inherits from li) */
  display: block; /* Ensure it takes full width if needed */
}

.pricing-details li .pitch-item-sub {
  display: block; /* Makes it appear on a new line */
  font-size: 13px; /* Smaller font size */
  color: rgba(255, 255, 255, 0.6); /* Slightly dimmer color */
  margin-top: 4px; /* Add a little space above */
  padding-left: 15px; /* Indent the subtext */
}

/* Styles for mystery upcoming features */
@keyframes subtle-focus-shift {
  0% { filter: blur(5px); opacity: 0.7; } /* Increased min blur */
  50% { filter: blur(7px); opacity: 0.6; } /* Max blur remains */
  100% { filter: blur(5px); opacity: 0.7; } /* Increased min blur */
}

.mystery-feature {
  display: flex;
  align-items: baseline;
  position: relative;
}

.mystery-feature .pitch-item-main {
  animation: subtle-focus-shift 2.5s infinite ease-in-out;
  transition: filter 0.3s ease, opacity 0.3s ease;
  cursor: default;
  opacity: 0.8;
}

.mystery-feature:hover .pitch-item-main {
  animation-play-state: paused;
  filter: blur(2px);
  opacity: 0.8;
}

.coming-soon-tag {
  color: #00ff6a;
  font-weight: bold;
  font-size: 11px;
  margin-left: 10px;
  opacity: 0.9;
  animation: pulse-text 1.8s infinite ease-in-out;
}

@keyframes pulse-text {
  0% { opacity: 0.6; }
  50% { opacity: 1.0; }
  100% { opacity: 0.6; }
}

/* Style the mystery feature list item for layout */
.mystery-feature {
  display: flex;        /* Arrange children horizontally */
  align-items: baseline; /* Align text baselines */
  /* Inherits padding/margin/bullet from default li unless overridden */
}

/* Adjust main item within flex container */
.mystery-feature .pitch-item-main {
  /* Animation and base styles remain */
  animation: subtle-focus-shift 2.5s infinite ease-in-out;
  transition: filter 0.3s ease, opacity 0.3s ease;
  cursor: default;
}

.mystery-feature:hover .pitch-item-main {
  animation-play-state: paused;
  filter: blur(2px);
  opacity: 0.8;
}

/* Remove styles for the old sub-element if they still exist */
/* .mystery-feature .pitch-item-sub.coming-soon { ... } */

/* Style for the new Coming Soon tag */
.coming-soon-tag {
  color: #00ff6a;        /* Green color */
  font-weight: bold;
  font-size: 11px;       /* Slightly smaller */
  margin-left: 10px;     /* Space from the blurred text */
  flex-shrink: 0;      /* Prevent tag from shrinking */
  animation: pulse-text 1.8s infinite ease-in-out; /* Add pulse animation */
}

/* Ensure pulse-text keyframes are defined */
@keyframes pulse-text {
  0% { opacity: 0.6; }
  50% { opacity: 1.0; }
  100% { opacity: 0.6; }
}

/* Ensure blur keyframes are defined */
@keyframes subtle-focus-shift {
  0% { filter: blur(5px); opacity: 0.7; } /* Increased min blur */
  50% { filter: blur(7px); opacity: 0.6; } /* Max blur remains */
  100% { filter: blur(5px); opacity: 0.7; } /* Increased min blur */
}


form#payment-form .form-row > label {
  margin-bottom: 20px !important;
  display: block;
}

form#payment-form .TermsText {
  font-size: 12px !important;
}

/* Marquee for Account Page */
.auth-container .generic-marquee-header {
  overflow: hidden;
  padding: 0;
  border-bottom: none;
  position: relative; 
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 22px 0;
  font-weight: 300;
  margin-top: 20px;
  width: calc(100% + 60px);
  margin-left: -30px;
}

.auth-container .generic-marquee-header .marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.auth-container .generic-marquee-header .marquee-content {
  display: inline-block;
  animation: marquee 60s linear infinite;
  padding: 0;
  white-space: nowrap;
}

.auth-container .generic-marquee-header .marquee-content .opaque-text {
  color: #ffffffba;
}

.auth-container .generic-marquee-header .marquee-content > span {
  display: inline-block;
  font-size: 17px;
  color: #fff;
  margin-right: 26px;
  position: relative;
}

.auth-container .generic-marquee-header .marquee-content > span::after {
  content: "";
  margin-left: 0;
}

/* Using existing marquee keyframes from onboarding_drawer.css, ensure that file is loaded if keyframes are not duplicated here */
/* @keyframes marquee { ... } */

p.key-pitch {
  font-size: 18px;
}
/* Responsive adjustments for account page marquee */
@media (max-width: 768px) {
  .pricing-details h4 {
    font-size: 21px;
  }


p.key-pitch {
  font-size: 15px;
}
  .auth-container .generic-marquee-header {
    padding: 15px 0;
  }
  
  .auth-container .generic-marquee-header .marquee-content > span {
    font-size: 14px;
    margin-right: 20px;
  }
}
 
/* Magic Prompt Dialog Styles */
.magic-prompt-dialog,
.result-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.magic-prompt-dialog-content,
.result-dialog-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.magic-prompt-dialog-content h3,
.result-dialog-content h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
}

.magic-prompt-dialog-content p {
  margin-bottom: 10px;
  color: #555;
}

.magic-prompt-dialog-content textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
}

.magic-prompt-dialog-content textarea.error {
  border-color: #f44336;
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.magic-prompt-dialog-content select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-size: 14px;
}

.dialog-buttons,
.result-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.dialog-buttons button,
.result-dialog-buttons button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  margin-left: 10px;
  transition: background-color 0.2s;
}

.dialog-buttons button:first-child,
.result-dialog-buttons button:first-child {
  background-color: #f0f0f0;
  color: #333;
}

.dialog-buttons button:last-child,
.copy-result-btn {
  background-color: #4a8cff;
  color: white;
}

.close-result-btn {
  background-color: #f0f0f0;
  color: #333;
}

.dialog-buttons button:hover,
.result-dialog-buttons button:hover {
  opacity: 0.9;
}

/* Result content styling */
.result-dialog-content > div {
  margin: 20px 0;
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 14px;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  border-left: 3px solid #4a8cff;
}

/* Styles for the generated image */
.result-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.result-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 4px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.add-to-canvas-btn {
  background-color: #4a8cff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.add-to-canvas-btn:hover {
  background-color: #3a7ced;
}

.copy-result-btn {
  background-color: #4a8cff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  margin-top: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
  display: inline-block;
}

.copy-result-btn:hover {
  background-color: #3a7ced;
} 
/* Context Menu Container - Simple paste button */
#context-menu-container {
    display: none; /* Hidden by default, shown via JS */
}

/* Animation for context menu */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation to the context menu when it has the show class */
#context-menu-container.show {
    animation: slideIn 0.2s ease forwards;
}
/* @media (prefers-color-scheme: dark) {

body .dimensional-grid-wrap {
  background: #101215;
}
body svg.dimensional-grid  {
  background: transparent; opacity: 0.1
}
body svg.dimensional-grid * {stroke: rgb(255 255 255 / 100%) !important;}


body .canvas-control[data-control="search"] input {
  background: #333;
  color: #fff;
}

body .canvas-control .floating-label {
  background: rgb(51 51 51 / 50%);
  color: rgb(255 255 255 / 50%);
}

body .loading-spinner-wrap {
  background: #333;
}

body .loading-spinner {
  border: 2px solid #444;
  border-top: 2px solid #ff912d;
}

body .layers-toolbar--header {
  background: rgb(51 51 51 / 100%);
  color: rgb(160 160 160);
}

body .layers-toolbar--header .collapse-arrow * {
  fill: rgb(160 160 160);
}

body .layers-toolbar--layers {
  background: rgb(51 51 51 / 50%);
}

body .layers-empty-state {color: rgb(160 160 160)}

body .layer {
  background: rgb(51 51 51 / 100%);
}

body .layer .layer-name {
  color: #fff;
}

body .help-button {
  background: #111;
}
 

body #text-toolbar-inner {
  box-shadow: 0px 4px 10px rgb(255 255 255 / 15%);
  border: 2px solid #3f3f3f;
}



} */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.drawer, .drawer * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.drawer[data-drawer-state="open"] {
  visibility: visible;
  transition-delay: 0s;
}

.drawer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drawer[data-drawer-state="open"] .drawer-overlay {
  opacity: 1;
}

/* Container for better centering */
.drawer-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none; /* Allow clicks to pass through to overlay */
}

.drawer-content {
  position: relative;
  width: calc(100% - 32px);
  max-width: 1200px;
  min-height: 0px;
  background: white;
  border-radius: 34px 34px 0 0;
  transition: transform 0.3s ease, height 0.3s cubic-bezier(0.1, 0.7, 0.1, 1);
  touch-action: none;
  will-change: transform;
  overflow: hidden;
  pointer-events: auto; /* Re-enable clicks for the drawer content */
  
  /* Use only Y transform to avoid fractional pixel values */
  transform: translateY(100%);
}

.drawer[data-drawer-state="open"] .drawer-content {
  transform: translateY(0);
}

.drawer-handle-pill {
  width: 42px;
  height: 5px;
  background: #c2c2c2;
  border-radius: 14px;
}
.drawer-handle {
  width: 100%;
  height: 5px;
  padding: 14px 0 14px;
  cursor: grab;
  touch-action: none;
  position: sticky;
  top: 0;
  margin-bottom: -1px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f9f9f9;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}

.drawer-handle:active {
  cursor: grabbing;
}

.drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-content-inner {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  position: relative;
  height: 100%;
}

.drawer-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid #E1E4ED;
  background: white;
  position: sticky;
  top: 0;
  z-index: 3;
}

#library-drawer .drawer-content-header {
  border-top: 1px solid #E1E4ED;
}


.drawer-content-header h2 {
  font-size: 21px;
  margin: 0;
}

/* Adjust the sign-in-prompt padding to match grid padding */
.sign-in-prompt {
  padding: 32px;
}

.drawer[data-fetching="true"] {
  pointer-events: none;
}

.drawer[data-fetching="true"] .drawer-content {
  opacity: 0.6;
}

.drawer-content-heading p {
  font-size: 14px;
  color: #3f3f3f;
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .drawer-content-header {
    padding: 16px 16px;
  }
  .drawer-handle {
    padding: 18px 0 18px;
  }
  .drawer-content-header h2 {
    font-size: 18px;
  }
 
}
#drawing-toolbar.hidden {
  display: none;
}

#drawing-toolbar {
  position: fixed;
  bottom: 0;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999998; /* One less than text toolbar to avoid conflicts */
  transform: translateY(100px) translateX(-50%);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

#drawing-toolbar.visible {
  transform: translateY(0) translateX(-50%);
  opacity: 1;
}

#drawing-toolbar button {
  background: transparent;
  border: none;
  color: #fff;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#drawing-toolbar-inner {
  pointer-events: auto;
  position: relative;
  border: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #000;
  color: #fff;
  border-radius: 30px;
  padding: 0px 16px;
  border: 2px solid #666;
  margin-bottom: 60px;
  gap: 16px;
}

#drawing-toolbar-inner .drawing-icon {
  padding-left: 16px;
  color: #8a8a8a;
  font-size: 17px;
}

.drawing-toolbar-block button {
  font-size: 17px;
}

/* Color indicator box */
.drawing-color-indicator {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Drawing toolbar blocks */
.drawing-toolbar-block {
  position: relative;
}

/* Color picker styles */
.drawing-color-picker-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  background: #000;
  border-radius: 16px;
  border: 2px solid #666;
  padding: 15px;
  margin-bottom: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index: 9999;
  color: #fff;
  transform: translateY(10px) translateX(-50%);
}

.drawing-color-picker-container.open {
  opacity: 1;
  pointer-events: auto !important;
  transform: translateY(0) translateX(-50%);
  animation: dropdown-appear 0.2s ease-out;
}

.drawing-color-picker-container.closing {
  opacity: 0;
  transform: translateY(10px) translateX(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.drawing-color-picker-panel {
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 250px;
  max-width: 100%;
}

.drawing-color-picker-gradient {
  height: 150px;
  border-radius: 8px;
  cursor: crosshair;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.drawing-color-selector-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: border-color 0.2s ease-in-out;
  z-index: 2;
}

.drawing-color-picker-slider {
  padding: 5px 0;
}

.drawing-hue-slider {
  width: 100%;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    to right,
    #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
  );
  border-radius: 5px;
  outline: none;
}

.drawing-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.drawing-hue-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.drawing-color-presets {
  width: 100%;
  position: relative;
}

.drawing-color-presets-inner {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}

.drawing-color-preset {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.drawing-color-preset:hover {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.drawing-color-preset.active {
  border: 2px solid #4a8fff;
  position: relative;
  z-index: 2;
}

/* Drawing color dropper preset styles */
.drawing-color-dropper-preset {
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #444;
  position: relative;
}

.drawing-color-dropper-preset svg {
  width: 15px;
  height: 15px;
  opacity: 1;
}

.drawing-color-dropper-preset:hover {
  background-color: #333;
  border-color: #666;
}

.drawing-color-dropper-preset:active {
  background-color: #444;
}

/* Brush size container */
.brush-size-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  border-radius: 16px;
  border: 2px solid #666;
  padding: 15px;
  margin-bottom: 10px;
  display: none;
  flex-direction: column;
  align-items: center;
  width: 200px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index: 9999;
  transform: translateY(10px) translateX(-50%);
}

/* Add a class for the brush size container content */
.brush-size-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25px; /* Add padding at the top to make room for the handle */
}

/* Brush size handle for dragging */
.brush-size-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 1001;
  background-color: #111;
  border-bottom: 1px solid #222;
  border-radius: 11px 11px 0 0;
  pointer-events: auto !important;
}

.brush-size-handle:active {
  cursor: grabbing;
}

/* Visual indicator in the handle */
.brush-size-handle::after {
  content: '';
  width: 40px;
  height: 4px;
  background-color: #444;
  border-radius: 4px;
  opacity: 0.6;
}

.brush-size-container.open {
  display: flex;
  animation: dropdown-appear 0.2s ease-out;
  opacity: 1;
  pointer-events: auto !important;
  transform: translateY(0) translateX(-50%);
}

.brush-size-container.closing {
  opacity: 0;
  transform: translateY(10px) translateX(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.brush-size-preview {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #000;
  border: 1px solid #fff;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brush-size-preview::after {
  content: '';
  display: block;
  background-color: #fff;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.brush-size-value {
  color: #fff;
  margin-top: 5px;
  font-size: 14px;
}

#brush-size-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #444;
  border-radius: 3px;
  outline: none;
}

#brush-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#brush-size-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Add styles for when drawing toolbar is active */
body.drawing-toolbar-active #all-canvas-controls {
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
}

body.drawing-toolbar-active #object-toolbar.fixed-toolbar {
  bottom: 80px !important;
}

.drawing-color-picker-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 1001;
  background-color: #111;
  border-bottom: 1px solid #222;
  border-radius: 11px 11px 0 0;
  pointer-events: auto !important;
}

.drawing-color-picker-handle:active {
  cursor: grabbing;
}

/* Add the visual indicator in the handle */
.drawing-color-picker-handle::after {
  content: '';
  width: 40px;
  height: 4px;
  background-color: #444;
  border-radius: 4px;
  opacity: 0.6;
}

/* Mobile override for info div */
@media (max-width: 768px) {
  #drawing-toolbar-inner {
    margin-bottom: 20px;
    padding: 0 8px;
  }

  #drawing-toolbar-inner .drawing-color-indicator {
    width: 14px;
    height: 14px;
  }   

  #drawing-toolbar-inner {
    gap: 0;
    width: 100%;
    justify-content: space-between;
  }
  
  #drawing-toolbar-inner .drawing-icon {
    padding-left: 8px;
    padding-right: 4px;
    font-size: 13px;
  }
  
  #drawing-toolbar button {
    font-size: 13px;
    padding: 10px;
  }
  
  div#drawing-toolbar {
    padding: 0 16px;
  }
  
  /* Mobile close button adjustments */
  #drawing-close-button {
    right: -16px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
   
  body.drawing-toolbar-active #all-canvas-controls {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  
  body.drawing-toolbar-active #all-canvas-controls .canvas-controls {
    margin-bottom: -100%;
  }
  
  body.drawing-toolbar-active #all-canvas-controls .canvas-controls,
  body.drawing-toolbar-active #all-canvas-controls #info {
    pointer-events: none;
  }

  /* Ensure both popups are centered properly on mobile */
  .drawing-color-picker-container,
  .brush-size-container {
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
  }
  
  .drawing-color-picker-container.open,
  .brush-size-container.open {
    transform: translateX(-50%);
  }

  .drawing-color-picker-container {
    padding: 12px;
  }

  .brush-size-container {
    padding: 12px;
  }

  .drawing-color-picker-gradient {
    height: 100px;
  }

  .drawing-color-presets {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
    width: calc(100% + 24px);
    margin-right: -12px;
    margin-left: -12px;
    position: relative;
  }

  /* Add the shadow element styles */
  .drawing-color-presets-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 2;
    transition: transform 0s ease-in-out;
  }

  .drawing-color-presets-shadow-right {
    right: 0;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
  }

  .drawing-color-presets-shadow-left {
    left: 0;
    background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
  }

  .drawing-color-presets-inner::-webkit-scrollbar {
    display: none;
  }

  .drawing-color-presets-inner {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    overflow: scroll;
    height: 30px;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 5px;
  }

  .drawing-color-preset {
    min-width: 30px;
  }

  .drawing-color-preset:last-child {
    margin-right: 15px;
  }

  .drawing-color-preset:first-child {
    margin-left: 15px;
  }
  
  .brush-size-container {
    width: 160px;
    padding: 10px;
  }
}

/* Ensure both toolbars don't show at the same time */
body.drawing-toolbar-active #text-toolbar,
body.text-toolbar-active #drawing-toolbar {
  display: none !important;
}

/* Close button styles */
#drawing-toolbar-inner #drawing-close-button {
  position: absolute;
  right: -60px; /* Position it offset from the right edge */
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  border: 2px solid #666;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 1; /* Lower than parent but still visible */
  padding: 0;
  line-height: 1;
}

#drawing-toolbar-inner #drawing-close-button:hover {
  background-color: #333;
}

#drawing-toolbar-inner #drawing-close-button:active {
  
} 

#drawing-close-button svg * {
   fill: #fff;
}

#drawing-close-button svg {
   width: 20px;
   height: auto;
}

button#drawing-close-button > span {
   display: flex;
   align-items: center;
   justify-content: center;
}

.drawing-icon svg {
   height: 19px;
   width: auto;
   margin-bottom: -2px;
opacity: 0.7;
}

#drawing-toolbar-inner .drawing-icon {
   padding-left: 8px;
}

@media (max-width: 768px) {
   #drawing-toolbar-inner #drawing-close-button {
      right: 50%;
      top: -32px;
      margin-right: -20px;
  }

  .drawing-icon svg {
      height: 16px;
   }
}
/* Eraser Toolbar Styles - Adapted from drawing-toolbar.css */

#eraser-toolbar.hidden {
  display: none;
}

#eraser-toolbar {
  position: fixed;
  bottom: 0;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999998; /* Same level as drawing toolbar */
  transform: translateY(100px) translateX(-50%);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

#eraser-toolbar.visible {
  transform: translateY(0) translateX(-50%);
  opacity: 1;
}

#eraser-toolbar button {
  background: transparent;
  border: none;
  color: #fff;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#eraser-toolbar-inner {
  pointer-events: auto;
  position: relative;
  border: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #000;
  color: #fff;
  border-radius: 30px;
  padding: 0px 16px;
  border: 2px solid #666;
  margin-bottom: 60px;
  gap: 16px;
}

#eraser-toolbar-inner .eraser-icon {
  padding-left: 16px;
  color: #FF4F50;
  font-size: 17px;
}

.eraser-toolbar-block button {
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.eraser-size-text {
  font-weight: normal;
}

.eraser-size-current {
  font-weight: bold;
  color: #FF4F50;
  min-width: 45px;
  text-align: left;
}

/* Eraser toolbar blocks */
.eraser-toolbar-block {
  position: relative;
}

/* Eraser toolbar slider block */
.eraser-toolbar-slider-block {
  display: flex;
  align-items: center;
  min-width: 120px;
  max-width: 200px;
  flex: 1;
}

.eraser-toolbar-slider-block input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #444;
  border-radius: 3px;
  outline: none;
}

.eraser-toolbar-slider-block input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #FF4F50;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.eraser-toolbar-slider-block input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #FF4F50;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Eraser size picker styles */
.eraser-size-picker-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  border-radius: 16px;
  border: 2px solid #666;
  padding: 15px;
  margin-bottom: 10px;
  display: none;
  flex-direction: column;
  align-items: center;
  width: 150px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index: 9999;
  transform: translateY(10px) translateX(-50%);
}

.eraser-size-picker-container.visible {
  display: flex;
  opacity: 1;
  transform: translateY(0) translateX(-50%);
}

/* Add a class for the eraser size container content */
.eraser-size-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eraser-size-preview {
  min-width: 50px;
  min-height: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #000;
  border: 1px solid #FF4F50;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.eraser-size-preview::after {
  content: '';
  display: block;
  background-color: #FF4F50;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute;
}

.eraser-size-value {
  color: #fff;
  margin-top: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #FF4F50;
}

/* Add styles for when eraser toolbar is active */
body.eraser-toolbar-active #all-canvas-controls {
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
}

body.eraser-toolbar-active #object-toolbar.fixed-toolbar {
  bottom: 80px !important;
}

/* Close button styles */
#eraser-toolbar-inner #eraser-close-button {
  position: absolute;
  right: -52px;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #666;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  color: #fff;
}

#eraser-toolbar-inner #eraser-close-button:hover {
  background-color: rgba(255, 79, 80, 0.9);
  border-color: #FF4F50;
}

#eraser-toolbar-inner #eraser-close-button:active {
  transform: scale(0.95);
}

#eraser-close-button svg * {
  fill: #fff;
}

#eraser-close-button svg {
  width: 20px;
  height: 20px;
}

button#eraser-close-button > span {
  display: block;
  line-height: 0;
}

.eraser-icon svg {
  fill: #FF4F50;
  width: 20px;
  height: 20px;
}

/* Hide eraser toolbar when other toolbars are active */
body.drawing-toolbar-active #eraser-toolbar,
body.text-toolbar-active #eraser-toolbar,
body.magic-face-toolbar-active #eraser-toolbar {
  display: none;
}

/* Hide other toolbars when eraser toolbar is active */
body.eraser-toolbar-active #drawing-toolbar,
body.eraser-toolbar-active #text-toolbar,
body.eraser-toolbar-active #magic-face-toolbar,
body.eraser-toolbar-active #prompt-toolbar {
  display: none !important;
}

/* Also hide top canvas controls except undo/redo */
body.eraser-toolbar-active #layers-toolbar {
  display: none;
}

/* Mobile overrides */
@media (max-width: 768px) {
  #eraser-toolbar-inner {
    margin-bottom: 20px;
    padding: 0 8px;
    gap: 0;
    width: 100%;
    justify-content: space-between;
  }
  
  #eraser-toolbar-inner .eraser-icon {
    padding-left: 8px;
    padding-right: 4px;
    font-size: 13px;
  }
  
  #eraser-toolbar button {
    font-size: 13px;
    padding: 10px;
  }
  
  .eraser-toolbar-block button {
    font-size: 13px;
    gap: 4px;
  }
  
  .eraser-size-text {
    display: none; /* Hide "Size" text on mobile to save space */
  }
  
  .eraser-size-current {
    min-width: 40px;
    font-size: 14px;
  }
  
  .eraser-toolbar-slider-block {
    position: relative;
    padding: 10px 0;
    margin: 0 8px;
  }
  
  .eraser-toolbar-slider-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    right: -10px;
    bottom: 0;
    z-index: 1;
  }
  
  .eraser-toolbar-slider-block input[type="range"] {
    position: relative;
    z-index: 2;
  }
  
  div#eraser-toolbar {
    padding: 0 16px;
  }
  
  /* Mobile close button adjustments */
  #eraser-toolbar-inner #eraser-close-button {
    right: 50%;
    top: -32px;
    margin-right: -20px;
    transform: translateY(-50%);
  }
   
  body.eraser-toolbar-active #all-canvas-controls {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  
  body.eraser-toolbar-active #all-canvas-controls .canvas-controls {
    margin-bottom: -100%;
  }
  
  body.eraser-toolbar-active #all-canvas-controls .canvas-controls,
  body.eraser-toolbar-active #all-canvas-controls #info {
    pointer-events: none;
  }

  /* Ensure popup is centered properly on mobile */
  .eraser-size-picker-container {
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
  }
  
  .eraser-size-picker-container.open {
    transform: translateX(-50%);
  }

  .eraser-size-picker-container {
    padding: 12px;
  }

  .eraser-icon svg {
    width: 18px;
    height: 18px;
  }

  /* Visual hint for drag area on mobile */
  #eraser-toolbar-inner {
    position: relative;
  }
  
 
  
  /* Add subtle hint that toolbar is draggable */
  .eraser-toolbar-slider-block {
    background: rgba(255, 79, 80, 0.1);
    border-radius: 8px;
    transition: background 0.2s ease;
  }
  
  .eraser-toolbar-slider-block:active {
    background: rgba(255, 79, 80, 0.2);
  }
}

/* Animation for dropdown appearance */
@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(10px) translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
} 
.export-preview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
  position: relative;
  padding: 20px;
}

.export-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #111;
}

/* Remove the max-height media queries since we want it to be fluid */
@media (max-width: 768px) {
  .export-buttons {
    gap: 4px;
  }
}

.export-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.export-option {
  display: flex;
  align-items: center;
  color: #888;
  font-size: 14px;
}

.export-option span {
  user-select: none;
}

/* Update export buttons container */
.export-buttons {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .export-controls {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
  }
  
  .export-buttons {
    width: 100%;
    align-items: stretch;
    gap: 12px;
  }
  
  .export-button  {
    width: 100%;
  }

 
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  margin-right: 12px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #DDD;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #FF912D;
  transition: .4s;
  border-radius: 50%;
  filter: blur(0px);
}

input:checked + .toggle-slider {
  background-color: #000;
}

input:checked + .toggle-slider:before {
  transform: translateX(24px);
  background-color: #00ff6a;
  filter: blur(0.7px);
  box-shadow: 0 0 8px rgba(0, 255, 106, 0.5);
}

.toggle-slider:before {
  transition: all .4s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: filter, background-color, transform;
}

.export-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 18px 8px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  height: 36px;
  transition: 0.2s ease all;
  background-color: #b0b0b0;
}

/* Copy button specific styles */
#copy-to-clipboard {
  background: #000;
  color: #fff;
}
 

/* Save button specific styles */
#save-image {
  background: #ff912d;
  color: #000;
}
 

.export-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 768px) {
  .export-button {
    font-size: 12px;
    padding: 5px 9px;
    height: 27px;
  }
  
  .export-buttons {
    gap: 24px;
  }
}
 

/* Add these specific styles for export drawer */
#export-drawer .drawer-content-inner {
  flex-direction: column-reverse;
  height: 100%;
  overflow: hidden;
}

#export-drawer .drawer-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#export-drawer .drawer-content-header {
  flex-shrink: 0;
  border-top: 1px solid #E1E4ED;
  border-bottom: none;
}


/* Add new styles for export drawer */
#export-drawer .drawer-container {
  top: 0;
  bottom: auto;
}

#export-drawer .drawer-content {
  bottom: auto;
  top: 0;
  transform: translateY(-100%);
  border-radius: 0 0 34px 34px;
  display: flex;
  flex-direction: column;
}

#export-drawer[data-drawer-state="open"] .drawer-content {
  transform: translateY(0);
}

/* Move handle to bottom for export drawer */
#export-drawer .drawer-handle {
  order: 2;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}

/* Adjust content order for export drawer */
#export-drawer .drawer-content-inner {
  order: 1;
  flex-direction: column-reverse;
}

#export-drawer .download-count {
  color: #888;
}

#export-drawer .drawer-content-header {
  border-top: 1px solid #4a4a4a;
  background: #222222;
}

#export-drawer .drawer-handle {
  background: #282828;
  border-top: 1px solid #4a4a4a;
}

#export-drawer .drawer-content {
  background: #000;
}

#export-drawer .drawer-content-header h2 {
  color: #fff;
}

#export-drawer .export-option {
  color: #a8a8a8;
}

#export-drawer .drawer-overlay {
  background-color: rgba(0, 0, 0, 0.68);
}

#export-drawer .drawer-handle-pill {
  background: #555;
}

#export-drawer #copy-to-clipboard {
  background: #11dc66;
    color: #000;
}


@media (max-width: 768px) {
  #export-drawer .drawer-content-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#export-drawer .drawer-content-header-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
}

#export-drawer .drawer-content-header-row.align-end {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
 

.export-buttons {
    margin-top: 22px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-button {
    font-size: 14px;
    height: 36px;
    padding: 6px 9px 9px;
}
}

#magic-video-button {
  background: #7209b7;
  color: #fff;
}

@media (max-width: 768px) {
  .export-buttons {
    flex-direction: column;
    gap: 12px;
  }
  
  .export-button {
    width: 100%;
  }

  .generating-text {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }
}

/* Style for the background indicator square */
.bg-indicator {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 4px; /* Rounded corners */
  border: 1px solid #666; /* Subtle border */
  vertical-align: middle;
  margin-right: 12px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); /* Inner shadow for depth */
}

/* State: Transparent */
.bg-indicator.transparent {
  /* Use a DARK checkerboard pattern */
  background-color: #333; /* Fallback */
  background-image: linear-gradient(45deg, #444 25%, transparent 25%),
                    linear-gradient(-45deg, #444 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #444 75%),
                    linear-gradient(-45deg, transparent 75%, #444 75%);
  background-size: 8px 8px; /* Smaller squares for the indicator */
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* State: White */
.bg-indicator.white {
  background-color: #ffffff;
  background-image: none;
}

/* State: Black */
.bg-indicator.black {
  background-color: #000000;
  background-image: none;
}


.drawer-content-header.has-rows {
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  padding: 0;
}

.drawer-content-header-row {
  padding: 16px 32px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.drawer-content-header-row:not(:last-child) {
  border-bottom: 1px solid #323232;
}

.drawer-content-header-row.align-end {
  justify-content: flex-end;
  gap: 32px;
}

#export-preview-image {
  /* Dark mode checkerboard background for transparency */
  background-color: #333; /* Fallback */
  background-image: linear-gradient(45deg, #444 25%, transparent 25%),
                    linear-gradient(-45deg, #444 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #444 75%),
                    linear-gradient(-45deg, transparent 75%, #444 75%);
  background-size: 16px 16px; /* Adjust size as needed */
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

 

.flash-messages {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 516;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px;
  pointer-events: none;
  opacity: 1;
}

@media (max-width: 768px) {
  .flash-messages {
    padding: 8px;
    bottom: 0px;
    align-items: center;
  }
}

.flash-message {
  display: flex;
  align-items: center;
  text-align: center;
  max-width: 25rem;
  margin: 0.5rem;
  padding: 0.6rem 1.25rem;
  background-color: #000;
  /* Slightly lighter black */
  border-radius: 30px;
  font-size: 13px;
  line-height: 1.25rem;
  font-family: 'Space Mono', monospace;
  pointer-events: none;
  color: #ffffff;
  opacity: 0;
  transform: translateY(1rem);
  animation: flash-message-slide-up 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    /* Subtle white outline */
    0 4px 6px rgba(0, 0, 0, 0.1),
    /* Soft shadow */
    0 1px 3px rgba(0, 0, 0, 0.1);
  /* Additional depth */
  backdrop-filter: blur(8px);
}

@keyframes flash-message-slide-up {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.flash-success {
  background-color: rgba(32, 32, 32, 0.95);
  /* Keep consistent with base flash-message */
}

.flash-error {
  background-color: rgba(32, 32, 32, 0.95);
  /* Keep consistent with base flash-message */
}
.help-content {
  padding: 32px;
}

.help-section {
  margin-bottom: 32px;
}

.help-section h3 {
  font-size: 28px;
  margin-bottom: 16px;
  color: #fff;
}

.help-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-section p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
  color: #bbbbbb;
}

.help-section li {
  padding: 12px 0;
  color: #bbbbbb;
  font-size: 16px;
  line-height: 1.5;
}

.help-section h3:not(:first-child) {
  margin-top: 40px;
}

.help-section li i {
  font-style: italic;
}

.help-section li:last-child {
  border-bottom: none;
}

.help-section ul {
  list-style: disc;
  margin-left: 30px;
}


@media (max-width: 768px) {
  .help-content {
    padding: 24px 16px;
  }
  
  .help-section h3 {
    font-size: 19px;
  }
  
  .help-section li {
    font-size: 14px;
    padding: 10px 0;
  }
}

.help-button span {
  
  font-size: 18px;
  
  color: #666;
}





#help-drawer .drawer-handle {
  order: 2;
  
  background: #141414; /* Lighter orange for handle */
  border-bottom: 1px solid #565656; /* Light orange border */
}

 

 
#help-drawer .drawer-handle-pill {
  background: #666; /* Medium orange for handle pill */
}

#help-drawer .drawer-content-header {
  border-top: 1px solid #565656;
  border-bottom: 1px solid #565656;
  background: #000; /* Lighter orange for header */
}

#help-drawer .drawer-content-heading {
  color: #fff;
}

#help-drawer .drawer-content {
  background: #141414;
}

.help-section-brand {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 30px;
}

.help-section-brand h2 {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
}

.help-section-brand img {
  width: 54px;
  margin-bottom: -20px;
}

.help-section p.help-section-brand-p {
  margin-bottom: 10px;
  font-size: 20px;
}

.help-section ul.help-section-brand-ul li {
  font-size: 16px;
}

@media (max-width: 768px) {
  .help-section-brand {
    margin-bottom: 18px;
  }

  .help-section ul.help-section-brand-ul li {
    font-size: 14px;
  }

  .help-section p {
    font-size: 15px;
  }
  .help-section p.help-section-brand-p {
    font-size: 16px;
  }
  .help-section-brand img {
    width: 48px;
    height: auto;
    margin-bottom: -16px;
  }

.help-section-brand h2 {
  font-size: 28px;
}
}
#layers-toolbar {
  position: absolute;
  right: 42px;
  top: 18px;
  max-height: 80vh;
  z-index: 100;
  
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Allow clicks to pass through */
}

#layers-toolbar-inner {
  max-height: 80vh; /* Overall max height for the inner part */
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Allow clicks to pass through */
  align-items: flex-end;
}

.layers-toolbar--layers {
  display: flex; /* To contain the inner scrolling div */
  flex-direction: column; /* Align inner div vertically */
  background-color: rgb(176 176 176 / 50%);
  border: 1px solid rgb(143 139 136 / 35%);
  border-radius: 14px;
  margin-top: 10px;
  overflow: visible; /* Allow marker to be visible outside container */
  margin-left: -20px;
  margin-right: 10px;
  width: 190px;
  position: relative; /* Ensure position relative for marker positioning */
  pointer-events: auto; /* Capture clicks on layers panel */
}

/* New inner container for scrolling */
.layers-list-container {
  overflow-y: auto; /* Enable vertical scrolling */
  max-height: calc(80vh - 60px); /* Adjust based on header/other elements */
  /* Hide scrollbar while maintaining functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  border-radius: 14px;
  /* Prevent shift-key from triggering scroll */
  overflow-x: hidden;
  position: relative; /* Keep position relative for content */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.layers-list-container::-webkit-scrollbar {
  display: none;
}

.layers-toolbar--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  background-color: rgb(176 176 176 / 50%);
  border: 1px solid rgb(143 139 136 / 35%);
  border-radius: 30px;
  width: 150px;
  position: relative;
  pointer-events: auto; /* Capture clicks on header */
}

.layer-count {
  font-weight: normal;
  margin-left: 2px;
}

.collapse-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
  font-size: 12px;
  margin-left: 5px;
  transform: rotate(90deg);
}

.collapse-arrow svg {
  width: 6px;
  height: auto;
  opacity: 0.6;
}

#layers-toolbar:not(.layers-toolbar-collapsed) .collapse-arrow {
  transform: rotate(-90deg);
}

.layer {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.layer:hover {
  background-color: rgba(255, 255, 255, 0.2);
  
}

.layer.active {
  background-color: rgb(250 132 24 / 49%); /* Orange for single selection */
}

/* Blue highlight for group selections / multiple selected layers */
.layer.group-active {
  background-color: rgb(59 138 255 / 59%); /* Light blue */
}

.layer.dragging {
  opacity: 0.7;
  background-color: rgba(100, 100, 100, 0.7);
  border: 1px dashed rgba(250, 132, 24, 0.5); /* Updated orange */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Ensure active layers retain their exact active style when dragged */
.layer.active.dragging {
  background-color: rgb(250 132 24 / 49%); /* Updated orange, same as .layer.active */
  opacity: 1; /* Override dragging opacity */
  border: none; /* Override dragging border */
  transform: none; /* Override dragging transform */
  box-shadow: none; /* Override dragging glow */
}

/* Style for group-active layers when dragged */
.layer.group-active.dragging {
  background-color: rgba(80, 150, 255, 0.35); /* Light blue, same as .layer.group-active */
  opacity: 1;
  border: none;
  transform: none;
  box-shadow: none;
}

.layer-img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-color: #333;
  margin-right: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.layer-img img, .layer-img canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.layer-name {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.layer-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  fill: white;
}

svg.layer-icon.drawing-icon {
  width: 18px;
  height: auto;
  opacity: 0.6;
}

.text-layer-icon {
  font-size: 15px;
  color: #ADADAD;
  text-align: center;
  
}

.layer-handle {
  cursor: grab;
  margin-right: 5px;
  opacity: 0.6;
  transition: opacity 0.2s;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  padding: 0 3px;
  font-size: 14px;
}

.layer-handle:hover {
  opacity: 1;
}

.layer-handle:active {
  cursor: grabbing;
}

/* For when the toolbar is collapsed */
.layers-toolbar-collapsed .layers-toolbar--layers {
  display: none;
}

/* Style mods for touch devices */
@media (pointer: coarse) {
  .layer-handle {
    font-size: 18px;
    padding: 0 5px;
  }
  
  .layer {
    padding: 6px 7px;
  }

  .layers-toolbar--layers {
    border-radius: 8px;
  }
}

.layer-insert-marker {
  position: absolute;
  left: 0px;
  right: 0px;
  width: calc(100% + 0px); /* Adjust width to prevent overflow */
  height: 4px; /* The line height */
  background-color: rgb(250, 132, 24); /* Orange */
  border-radius: 2px;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(250, 132, 24, 0.9); /* Orange glow */
  transition: top 0.15s ease;
  animation: pulse-orange 1.5s infinite;
}

/* Updated pulse animation with orange */
@keyframes pulse-orange {
  0% {
    opacity: 0.8;
    box-shadow: 0 0 6px rgba(250, 132, 24, 0.8);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 12px rgba(250, 132, 24, 1);
    transform: scaleX(1.02);
  }
  100% {
    opacity: 0.9;
    box-shadow: 0 0 6px rgba(250, 132, 24, 0.8);
  }
}

/* Add small arrow indicators to the marker to make it more visible */
.layer-insert-marker::before,
.layer-insert-marker::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: rgb(250, 132, 24); /* Orange */
  border-radius: 50%;
  top: -2px;
  box-shadow: 0 0 5px rgba(250, 132, 24, 0.9); /* Orange glow */
}

.layer-insert-marker::before {
  left: -4px;
}

.layer-insert-marker::after {
  right: -4px;
}

/* Style for the empty state message */
.layers-empty-state {
  padding: 6px;
  text-align: center;
  font-size: 12px;
  user-select: none;
}

.layer.layer-reordering:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(250, 132, 24, 0.4); /* Updated orange */
}

/* New style for the index column */
.layer-index {
  font-size: 12px;
  margin-left: 8px; /* Space between name and index */
  text-align: right; /* Align index to the right */
  flex-shrink: 0; /* Prevent shrinking */
  padding: 3px;
    color: #222;
    /* font-weight: bold; */
    font-size: 13px;
    transition: opacity 0.2s;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

/* Prevent page scroll on touch devices while dragging a layer */
.layers-list-container.is-touch-dragging {
  touch-action: none;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  #layers-toolbar {
    right: 16px;
    left: unset;
    width: unset;
    top: 60px;
  }
  #layers-toolbar-inner {
    align-items: flex-end;
  }
  .layers-toolbar--layers {
    margin-right: 0px;
    margin-left: 0px;
    position: relative;
    overflow: visible; /* Keep overflow visible */
    width: 60px;
  }
  .layer-img {
    width: 20px;
    height: 20px;
  }

  .layers-toolbar--header {
    width: 126px;
    font-size: 12px;
    padding: 6px 16px;
  }

  .layer {
    padding: 8px 7px;
  }

  .layers-list-container {
    position: relative;
    overflow-y: auto; /* Keep vertical scrolling */
    overflow-x: visible; /* Allow insert marker to extend beyond container */
  }
  
  /* Enhanced marker for mobile */
  .layer-insert-marker {
    height: 5px; /* Slightly taller line for easier visibility */
    width: 60px; /* Fixed width for mobile */
    left: 0px;
    right: auto;
    background-color: rgb(250, 132, 24, 0.8); /* More visible orange */
    box-shadow: 0 0 8px rgba(250, 132, 24, 0.8); /* Softer glow */
    z-index: 2000; /* Ensure higher z-index on mobile */
  }
  
  /* Adjust marker indicators for mobile */
  .layer-insert-marker::before,
  .layer-insert-marker::after {
    width: 10px;
    height: 10px;
    top: -2.5px;
  }
  
  .layer-insert-marker::before {
    left: -5px;
  }
  
  .layer-insert-marker::after {
    right: -5px;
  }
}

/* Locked state styles */
.layer.locked {
  
}

.layer.locked:hover {
  background-color: rgba(244, 67, 54, 0.4); /* Slightly darker red on hover */
}

/* Override active styles when locked */
.layer.locked.active,
.layer.locked.group-active {
  background-color: rgba(244, 67, 54, 0.6) !important; /* Darker red when active AND locked, use !important to ensure override */
}

/* Lock Icon Placeholder styles */
.layer-lock-icon {
  display: none;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      margin-left: 6px;
      flex-shrink: 0;
      text-align: right;
      flex-shrink: 0;
       
}

.layer.locked .layer-lock-icon {
  padding: 4px;
  color: #222;
  font-size: 13px;
  transition: opacity 0.2s;
  background-color: rgb(244 67 54 / 80%);
  border-radius: 6px;
  border: 1px solid #fff;
}

.layer-lock-icon svg {
  width: 100%;
  height: 100%;
  fill: #333; /* Dark icon color */
}

.layer.locked .layer-lock-icon  {
  display: flex; /* Show icon only when layer is locked */
}
.layers-empty-state svg {
  width: 13px;
  height: auto;
}
@media screen and (max-width: 768px) {
 
  
  .layers-empty-state {
      padding: 3px;
  }

  .layers-list-container {
    border-radius: 8px;
  }
  .layer-img {
    margin-right: 0;
  }
  .layer-handle {
    display: none;
  }

  .layer-name {
    display: none;
  }
  
}
/* Magic Erase Toolbar */
#magic-erase-toolbar.hidden {
  display: none;
}

#magic-erase-toolbar {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #181818;
  border-radius: 9999px;
  padding: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
}

#magic-erase-toolbar.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#magic-erase-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
}

#magic-erase-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
}

/* Always hide text selection for buttons */
#magic-erase-toolbar-inner button {
  user-select: none !important;
  -webkit-user-select: none !important;
}

#magic-erase-toolbar-inner .magic-erase-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

#magic-erase-toolbar-inner .magic-erase-icon svg {
  width: 20px;
  height: 20px;
}

/* Magic Erase size button styling */
.magic-erase-toolbar-block {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

#magic-erase-toolbar-size {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  transition: background-color 0.2s ease;
}

#magic-erase-toolbar-size:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.magic-erase-size-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.magic-erase-size-current {
  color: white;
  font-weight: 600;
}

/* Magic Erase size picker container */
.magic-erase-size-container {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #181818;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
  min-width: 200px;
}

.magic-erase-size-container.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

.magic-erase-size-preview {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.magic-erase-size-preview::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 0, 128, 0.3);
  border: 1.5px solid white;
  box-shadow: 0 0 0 1px #FF0080;
  width: 30px;
  height: 30px;
  transition: width 0.1s ease, height 0.1s ease;
}

.magic-erase-size-value {
  text-align: center;
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}

#magic-erase-size-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

#magic-erase-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #FF0080;
  border-radius: 50%;
  cursor: grab;
  transition: transform 0.1s ease;
}

#magic-erase-size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

#magic-erase-size-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

#magic-erase-size-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #FF0080;
  border-radius: 50%;
  cursor: grab;
  border: none;
  transition: transform 0.1s ease;
}

#magic-erase-size-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}

#magic-erase-size-slider::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

/* Close button styling */
#magic-erase-toolbar-inner #magic-erase-close-button {
  margin-left: 8px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.1s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#magic-erase-toolbar-inner #magic-erase-close-button svg {
  width: 20px;
  height: 20px;
  fill: white;
}

#magic-erase-toolbar-inner #magic-erase-close-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

#magic-erase-toolbar-inner #magic-erase-close-button:active {
  transform: scale(0.95);
}

/* Confirm button styling */
#magic-erase-toolbar-inner #magic-erase-confirm-button {
  margin-left: 12px;
  padding: 10px 20px;
  background-color: #FF0080;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.1s ease;
  font-weight: 600;
  color: white;
}

#magic-erase-toolbar-inner #magic-erase-confirm-button:hover {
  background-color: #e6006e;
  transform: scale(1.02);
}

#magic-erase-toolbar-inner #magic-erase-confirm-button:active {
  transform: scale(0.98);
}

/* Hide when other toolbars are active */
body.drawing-toolbar-active #magic-erase-toolbar,
body.text-toolbar-active #magic-erase-toolbar,
body.eraser-toolbar-active #magic-erase-toolbar,
body.magic-face-toolbar-active #magic-erase-toolbar {
  display: none !important;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  #magic-erase-toolbar {
    background-color: #1a1a1a;
  }
  
  .magic-erase-size-container {
    background-color: #1a1a1a;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #magic-erase-toolbar {
    bottom: 70px;
    padding: 6px;
  }
  
  #magic-erase-toolbar-inner {
    gap: 8px;
    padding: 0 6px;
  }
  
  #magic-erase-toolbar-inner .magic-erase-icon {
    width: 20px;
    height: 20px;
    margin-right: 2px;
  }
  
  #magic-erase-toolbar button {
    padding: 6px;
    font-size: 13px;
  }
  
  #magic-erase-toolbar-size {
    padding: 6px 12px;
  }
  
  .magic-erase-size-text {
    font-size: 12px;
  }
  
  .magic-erase-size-current {
    font-size: 13px;
  }
  
  .magic-erase-size-container {
    padding: 12px;
    min-width: 180px;
  }
  
  .magic-erase-size-preview {
    width: 40px;
    height: 40px;
  }
  
  .magic-erase-size-value {
    font-size: 13px;
  }
  
  #magic-erase-toolbar-inner #magic-erase-close-button {
    width: 36px;
    height: 36px;
    padding: 8px;
  }
  
  #magic-erase-toolbar-inner #magic-erase-close-button svg {
    width: 18px;
    height: 18px;
  }
}

/* Extra small devices */
@media (max-width: 400px) {
  div#magic-erase-toolbar {
    transform: translateX(-50%) scale(0.9);
  }
  
  #magic-erase-toolbar-inner #magic-erase-close-button {
    margin-left: 4px;
  }
}

/* Landscape mode adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  #magic-erase-toolbar {
    bottom: 50px;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  #magic-erase-toolbar {
    border: 2px solid white;
  }
  
  .magic-erase-size-container {
    border: 2px solid white;
  }
  
  #magic-erase-toolbar-inner #magic-erase-close-button {
    border: 2px solid white;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #magic-erase-toolbar,
  .magic-erase-size-container,
  #magic-erase-toolbar button,
  #magic-erase-size-slider::-webkit-slider-thumb,
  #magic-erase-size-slider::-moz-range-thumb {
    transition: none;
  }
} 
/* Basic styles adapted from drawing-toolbar.css */

#magic-face-toolbar.hidden {
  display: none;
}

#magic-face-toolbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  display: flex;
width: auto;
  align-items: center;
  justify-content: center;
  z-index: 99999999;
  transform: translateY(100px) translateX(-50%);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

#magic-face-toolbar.visible {
  transform: translateY(0) translateX(-50%);
  opacity: 1;
  pointer-events: auto; /* Enable pointer events when visible */
}

#magic-face-toolbar button {
  background: transparent;
  border: none;
  color: #fff;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#magic-face-toolbar-inner {
  pointer-events: auto;
  position: relative;
  border: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #000;
  color: #fff;
  padding: 0px 16px;
  border: 2px solid #666;
  margin-bottom: 60px;
  gap: 16px;
}

/* Example icon style - adapt as needed */
#magic-face-toolbar-inner .magic-face-icon {
  padding-left: 8px; /* Adjust if needed */
  color: #8a8a8a;
  font-size: 17px;
}

.magic-face-toolbar-block button {
  font-size: 17px;
}

/* Toolbar blocks */
.magic-face-toolbar-block {
  position: relative;
}

/* Style for active state */
body.magic-face-toolbar-active #all-canvas-controls {
  /* Example: Hide other controls when magic face toolbar is active */
  /* transform: translateY(100px); */
  /* opacity: 0; */
  /* pointer-events: none; */
}

body.magic-face-toolbar-active #object-toolbar.fixed-toolbar {
  /* Example: Adjust object toolbar position */
  /* bottom: 80px !important; */
}

/* Close button styles */
#magic-face-toolbar-inner #magic-face-close-button,
#magic-face-toolbar-inner #magic-face-reset-button {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  border: 2px solid #666;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 1;
  padding: 0;
  line-height: 1;
}

#magic-face-toolbar-inner #magic-face-close-button {
   right: -120px;
}

/* Pulsing effect for the close button when request is in progress */
#magic-face-toolbar-inner #magic-face-close-button.processing {
  cursor: not-allowed;
  pointer-events: none;
  overflow: hidden;
}

#magic-face-toolbar-inner #magic-face-close-button.processing::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  animation: pulse-fade 1.5s ease-in-out infinite;
}

@keyframes pulse-fade {
  0% {
    opacity: 0.2;
    background-color: rgba(255, 133, 46, 0.2);
  }
  50% {
    opacity: 0.6;
    background-color: rgba(255, 133, 46, 0.5);
  }
  100% {
    opacity: 0.2;
    background-color: rgba(255, 133, 46, 0.2);
  }
}

/* Add new animation for processing state (used by both reset and close buttons) */
@keyframes magicFacePulsate {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

/* Replace animation with simple opacity setting */
.magic-face-processing {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease-in-out !important; /* Smooth opacity transitions */
}

/* Modifier class for smooth exit from animation */
.magic-face-processing-exit {
  opacity: 1 !important;
  transition: opacity 0.3s ease-out !important;
}

#magic-face-toolbar-inner #magic-face-close-button:hover,
#magic-face-toolbar-inner #magic-face-reset-button:hover {
  background-color: #333;
}

#magic-face-close-button svg *,
#magic-face-reset-button svg * {
   fill: #fff;
}

#magic-face-close-button svg,
#magic-face-reset-button svg {
   width: 20px;
   height: auto;
}

button#magic-face-close-button > span,
button#magic-face-reset-button > span {
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Magic Face Config Dropdown Styles (similar to color-picker-container) */
.magic-face-config-dropdown {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  background: #000;
  border-radius: 16px;
  border: 2px solid #666;
  padding: 15px;
  margin-bottom: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index: 9999;
   
  color: #fff;
  transform: translateY(10px) translateX(-50%);
}

.magic-face-config-dropdown.open {
  opacity: 1;
  pointer-events: auto !important;
  transform: translateY(0) translateX(-50%);
  animation: dropdown-appear 0.2s ease-out;
}

.magic-face-config-dropdown.closing {
  opacity: 0;
  transform: translateY(10px) translateX(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Handle styles for swipe-to-close functionality */
.magic-face-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 1001;
  background-color: #111;
  border-bottom: 1px solid #222;
  border-radius: 11px 11px 0 0;
  pointer-events: auto !important;
}

.magic-face-handle:active {
  cursor: grabbing;
}

/* Add the visual indicator in the handle */
.magic-face-handle::after {
  content: '';
  width: 40px;
  height: 4px;
  background-color: #444;
  border-radius: 4px;
  opacity: 0.6;
}
 
/* Adjust padding for content to make room for handle */
.magic-face-config-container {
  padding-top: 15px;
}

/* Mobile Overrides */
@media (max-width: 768px) {
  #magic-face-toolbar-inner {
    margin-bottom: 20px;
    padding: 0 8px;
    gap: 0;
    width: 100%;
    justify-content: space-between;
  }

  #magic-face-toolbar-inner .magic-face-icon {
    padding-left: 8px;
    padding-right: 4px;
    font-size: 13px;
  }

  #magic-face-toolbar button {
    font-size: 13px;
    padding: 10px;
  }

  div#magic-face-toolbar {
    padding: 0 16px;
  }
  #magic-face-toolbar-inner #magic-face-reset-button {
    right: unset;
    left: -60px;
}

button#magic-face-close-button {
    right: -60px !important;
}
 
  body.magic-face-toolbar-active #all-canvas-controls {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  body.magic-face-toolbar-active #all-canvas-controls .canvas-controls {
    margin-bottom: -100%;
  }
  
  body.magic-face-toolbar-active #all-canvas-controls .canvas-controls,
  body.magic-face-toolbar-active #all-canvas-controls #info {
    pointer-events: none;
  }

  body.magic-face-toolbar-active #object-toolbar.fixed-toolbar {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }

  .magic-face-config-dropdown {
    bottom: 100%;
    left: 50%;
    width: 80svw !important;
    padding: 12px;
    top: auto;
    transform: translateX(-50%);
  }
  
  .magic-face-config-dropdown.open {
    transform: translateY(0) translateX(-50%);
  }

  .magic-face-inputs {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .magic-face-menu-buttons {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  #magic-face-badge {
    margin-bottom: 6px;
  }

  .magic-face-section h3 {
    font-size: 14px;
    margin-bottom: 18px;
  }

  #magic-face-menu-container .magic-face-menu-buttons {
    align-items: flex-end;
  }
}

@media (min-width: 769px) {
  body.magic-face-toolbar-active #all-canvas-controls .canvas-controls,
  body.magic-face-toolbar-active #all-canvas-controls #info {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
  }
  body.magic-face-toolbar-active #object-toolbar.fixed-toolbar {
    transform: translateY(-120%); /* Adjust as needed */
    opacity: 0;
    pointer-events: none;
  }
}

/* Ensure toolbars don't overlap visually */
body.drawing-toolbar-active #magic-face-toolbar,
body.text-toolbar-active #magic-face-toolbar,
body.magic-face-toolbar-active #drawing-toolbar,
body.magic-face-toolbar-active #text-toolbar {
  display: none !important;
}

/* Add specific styles for magic face buttons/elements here */
/* Example: */
/* #magic-face-find { ... } */
/* .magic-face-option { ... } */

/* Keyframe for dropdown appearance (if needed) */
@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(10px) translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
} 


#magic-face-menu-container {
  display: none;
}

#magic-face-menu-container .magic-face-menu-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#magic-face-menu button {
  display: flex;
  align-items: center;
  justify-content: center;
}

#magic-face-badge {
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 2px;
  margin-right: 6px;
}

#magic-face-badge svg {
  width: auto;
  height: 18px;
  margin-right: 4px;
}

/* Magic Face sections and inputs styling */
.magic-face-sections {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.magic-face-section {
  display: none;
  position: relative;
}
 
.magic-face-section-inner {
  position: relative;
  top: 0;
  left: 0;
  z-index: 4;
}

.magic-face-section.active {
  display: block;
}

.magic-face-section h3 {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
}

.magic-face-input {
  display: flex;
  justify-content: space-between;
}

/* Tab styles */
.magic-face-tabs {
  display: flex;
  gap: 6px;
}

.magic-face-tab {
  background: transparent;
  border: none;
  padding: 8px 15px;
  margin-right: 5px;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.magic-face-tab.active {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
}

.magic-face-tab:hover:not(.active) {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
}

.magic-face-input-group {
  position: relative;
}

.magic-face-input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
}

.magic-face-input-group input {
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none;
  background: rgba(0, 0, 0, 0.1) !important;
}

.magic-face-input-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: none;
}

.magic-face-input-group input[type="range"][orient="vertical"]::-webkit-slider-thumb {
  background: transparent !important;
  box-shadow: none !important;
}

.magic-face-input-group.circular {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100px;
}

.tilt-slider-container {
  position: relative;
  height: 80px;
  bottom: -10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.tilt-slider-container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  background: transparent;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border: 2px solid transparent;
  border-top: 2px dashed rgba(255, 255, 255, 0.3);
  transform: translateY(10px);
  z-index: 0;
}

.magic-face-input-group.circular input[type="range"].circular-slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 8px;
  background: transparent;
  border-radius: 30px;
}

.magic-face-input-group.circular input[type="range"].circular-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg width='106' height='121' viewBox='0 0 106 121' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100.709 50.9333C101.11 42.7979 100.178 28.0013 90.4432 16.1307C82.3077 6.0004 69.7765 0.666667 53.2405 0H52.9749H52.7092C36.1732 0.666667 23.6412 6 15.3759 16.136C5.64151 28.0005 4.70924 42.8027 5.11031 50.9387C2.70924 53.0741 1.11031 55.7408 0.443643 58.9387C-0.358437 62.5376 -0.0876104 66.4075 1.37594 71.7408C3.24047 78.4075 7.11034 82.1419 11.1103 83.8763C16.3082 96.8085 25.3757 108.142 36.4437 115.21C41.3759 118.407 47.1103 120.142 52.9743 120.142C58.8383 120.142 64.5733 118.407 69.505 115.21C80.5727 108.142 89.641 96.8083 94.8383 83.8763C98.8383 82.1419 102.703 78.2773 104.573 71.7408C106.042 66.5429 106.307 62.5429 105.505 58.9387C104.708 55.7356 103.11 52.9333 100.709 50.9333Z' fill='%23FF852E'/%3E%3Cpath d='M100.709 50.9333C101.11 42.7979 100.178 28.0013 90.4432 16.1307C82.3077 6.0004 69.7765 0.666667 53.2405 0H52.9749H52.7092C36.1732 0.666667 23.6412 6 15.3759 16.136C5.64151 28.0005 4.70924 42.8027 5.11031 50.9387C2.70924 53.0741 1.11031 55.7408 0.443643 58.9387C-0.358437 62.5376 -0.0876104 66.4075 1.37594 71.7408C3.24047 78.4075 7.11034 82.1419 11.1103 83.8763C16.3082 96.8085 25.3757 108.142 36.4437 115.21C41.3759 118.407 47.1103 120.142 52.9743 120.142C58.8383 120.142 64.5733 118.407 69.505 115.21C80.5727 108.142 89.641 96.8083 94.8383 83.8763C98.8383 82.1419 102.703 78.2773 104.573 71.7408C106.042 66.5429 106.307 62.5429 105.505 58.9387C104.708 55.7356 103.11 52.9333 100.709 50.9333ZM96.7088 69.4693C94.9744 75.7349 91.1098 76.9381 88.9744 76.9381C88.839 76.9381 88.5733 77.0736 88.5733 77.2038C83.7712 91.8704 74.0427 102.537 65.104 108.272C61.3696 110.673 57.104 111.871 52.9685 111.871C48.8331 111.871 44.4373 110.673 40.8331 108.272C31.9008 102.537 22.1664 91.8704 17.3637 77.2038C17.3637 77.0684 17.0981 76.9381 16.9627 76.9381C14.9627 76.9381 10.9627 75.6048 9.22828 69.4693C7.36375 62.6672 7.49388 57.4693 13.4939 55.3333C13.6293 55.3333 13.7595 55.0677 13.7595 54.9323C13.0928 50.9323 8.02511 9.86429 52.9568 8.12963C97.8888 9.86403 92.8209 50.7963 92.1542 54.9323C92.1542 55.0677 92.2896 55.3333 92.4198 55.3333C98.4406 57.4688 98.5709 62.6667 96.7062 69.4693H96.7088Z' fill='white'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  cursor: pointer;
  border: none;
  box-shadow: none;
  margin-top: -24px;
}

.slider-value {
  display: inline-block;
  font-size: 10px;
  color: #888;
  margin-top: 3px;
  min-width: 20px;
  text-align: center;
}
 

.magic-face-button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
}
 

div#magic-face-menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.magic-face-section h3 {
  margin-bottom: 14px;
}

.magic-face-inputs {
  display: flex;
  gap: 18px;
}

/* Joystick Control - Clean Dynamic Version */
.joystick-control {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  --handle-size: 25px;
  perspective: 400px;
}

.joystick-background {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgb(131 131 131 / 20%);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.joystick-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: grab;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-style: preserve-3d;
  z-index: 100;
  pointer-events: auto;
}

.joystick-labels {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  font-size: 10px;
  color: #555;
  text-align: center;
  z-index: -1;
}

.joystick-labels span {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  line-height: 12px;
}

.joystick-labels .label-left {
  left: 0;
  top: 50%;
  margin-top: -6px;
}

.joystick-labels .label-right {
  right: 0;
  top: 50%;
  margin-top: -6px;
}

.joystick-labels .label-top {
  left: 50%;
  top: 0;
  margin-left: -6px;
}

.joystick-labels .label-bottom {
  left: 50%;
  bottom: 0;
  margin-left: -6px;
}

/* Replace the problematic eye-slider styles with these */
.eye-slider-container {
  position: relative;
  width: 40px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep the eye thumb icon positioning */
.eye-thumb-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -10px;
}

 .magic-face-input-group input:not([orient="vertical"]) {
  border-radius: 5px !important;
  background: rgb(167 167 167 / 20%) !important;
}

.magic-face-inputs input[orient="vertical"].eye-slider {
  background: rgb(167 167 167 / 20%) !important;
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
  width: 8px !important;
  overflow: hidden;
  border-radius: 5px !important;
  vertical-align: bottom;
  height: 80px !important;
}

.magic-face-eye-inputs-container {
  display: flex;
  gap: 24px;
}

 .magic-face-input-group.circular input[type="range"].circular-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 60px;
  background: transparent;
  position: relative;
  outline: none;
  margin: 10px auto;
  z-index: 2;
  background: transparent !important;
}

@media (max-width: 768px) {
  .magic-face-config-dropdown {
 
    width: 100%;
 
  }
  .magic-face-inputs {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    padding-top: 16px;
    padding-bottom: 16px;
}
 
  .magic-face-menu-buttons {
    flex-direction: column;
    flex-wrap: nowrap;
  }

 
  #magic-face-badge {
    margin-bottom: 6px;

  }

  .magic-face-section h3 {
    font-size: 14px;
    margin-bottom: 18px;
  }

  #magic-face-menu-container .magic-face-menu-buttons {
    align-items: flex-end;
  }
}

/* Onboarding drawer styles - top positioning like export drawer */
#onboarding-drawer .drawer-container {
  top: 0;
  bottom: auto;
}

#onboarding-drawer .drawer-content {
  bottom: auto;
  top: 0;
  transform: translateY(-100%);
  border-radius: 0 0 34px 34px;
  display: flex;
  flex-direction: column;
  background: transparent; /* Light orange background */
}

#onboarding-drawer[data-drawer-state="open"] .drawer-content {
  transform: translateY(0);
}

/* Move handle to bottom for onboarding drawer */
#onboarding-drawer .drawer-handle {
  order: 2;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  background: #000; /* Lighter orange for handle */
  border-top: 1px solid #565656; /* Light orange border */
}

/* Adjust content order for onboarding drawer */
#onboarding-drawer .drawer-content-inner {
  order: 1;
  flex-direction: column-reverse;

}

@media (min-width: 1000px) {
  #onboarding-drawer .drawer-content-inner {
   height: 100%;
  }
}
/* Onboarding header styling */
#onboarding-drawer .drawer-content-header {
  border-top: 1px solid #565656;
  border-bottom: none;
  background: #4b4b4b; /* Lighter orange for header */
}

#onboarding-drawer .drawer-content-header h2 {
  color: #ff7b00; /* Darker orange for title */
}

 
#onboarding-drawer .drawer-handle-pill {
  background: #666; /* Medium orange for handle pill */
}

/* Onboarding content styles */
 

.onboarding-section h3 {
  font-size: 18px;
  margin-bottom: 16px;
  color: #ff7b00; /* Darker orange for headings */
}

.onboarding-section p {
  margin-bottom: 16px;
  color: #b4b4b4;
  font-size: 15px;
  line-height: 1.5;
}

.onboarding-section ul,
.onboarding-section ol {
  margin-left: 30px;
  color: #666;
  font-size: 15px;
  line-height: 1.5;
}

.onboarding-section li {
  padding: 8px 0;
}

.onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0px;
}

/* Updated styling for the "Start Creating Without Account" button */
#start-creating {
  background-color: transparent;
  color: #888;
  border: none;
  font-size: 14px;
  padding: 8px 16px;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

#start-creating:hover {
  color: #555;
}

.onboarding-button {
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
}

.onboarding-button.primary {
  background-color: #ff912d;
  color: #000;
}

.onboarding-button.primary:hover {
  background-color: #ffab5d;
}

.onboarding-button.secondary {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}

.onboarding-button.secondary:hover {
  background-color: #e9e9e9;
}

@media (max-width: 768px) {
 
  
  .onboarding-section h3 {
    font-size: 16px;
  }
  
  .onboarding-section p,
  .onboarding-section li {
    font-size: 14px;
  }
  
  .onboarding-button {
    font-size: 14px;
    padding: 10px 20px;
  }
}

/* Add these styles to your onboarding_drawer.css file */

.onboarding-pitch {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 24px;
}

.onboarding-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 12px;
 
}

.onboarding-section-col:last-child {
   padding: 0px 60px 0px 90px;
}

.auth-button {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid #ddd;
  background-color: #000;
  color: #fff;
}

.auth-button svg {
  margin-right: 12px;
  flex-shrink: 0;
}

    

@media (max-width: 768px) {
  .onboarding-pitch {
    font-size: 14px;
  }
  
  .auth-button {
    font-size: 14px;
    padding: 8px 12px;
  }
  
  .auth-button svg {
    width: 20px;
    height: 20px;
  }
}

.ex-image img {
  max-width: 576px; /* 620px reduced by 20% */
}

.ex-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

/* Add CSS variables for scaling control */
:root {
  --onboarding-scale: 1;
  --image-container-scale: 0.9;
  --floating-image-size: 40%;
  --top-right-x: -60px;
  --top-right-y: -70px;
  --top-right-secondary-x: 0px;
  --top-right-secondary-y: -110px;
  --bottom-left-x: 30px;
  --bottom-left-y: -102px;
  --main-image-width: 100%; /* Add this new variable for main image width */
}

/* Image container with relative scaling */
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform: scale(calc(var(--image-container-scale) * var(--onboarding-scale)));
  transform-origin: center center;
}

.main-image {
  width: var(--main-image-width); /* Use the variable instead of hardcoded value */
  display: block;
}

.floating-image {
  position: absolute;
  max-width: var(--floating-image-size);
}

.top-right {
  top: var(--top-right-y);
  right: var(--top-right-x);
  animation: float-diagonal-1 28s linear infinite;
}

.top-right-secondary {
  top: var(--top-right-secondary-y);
  right: var(--top-right-secondary-x);
  animation: float-diagonal-1 28s linear infinite;
}

.bottom-left {
  bottom: var(--bottom-left-y);
  left: var(--bottom-left-x);
  animation: float-diagonal-2 18s linear infinite;
}

.bottom-left-secondary {
  animation: float-diagonal-2 6s linear infinite;
}

@keyframes float-diagonal-1 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(30px, 15px);
  }
  50% {
    transform: translate(0, 30px);
  }
  75% {
    transform: translate(-30px, 15px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes float-diagonal-2 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(20px, -10px);
  }
  50% {
    transform: translate(40px, 0);
  }
  75% {
    transform: translate(20px, 10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.onboarding-section-cols {
  display: flex;
}

.onboarding-section-col {
  width: 100%;
 
  display: flex;
  flex-direction: column;;
  
  justify-content: center;
  color: #fff;
}


.onboarding-section-col-header h2 {
  font-size: 42px;
  font-weight: bold;
  font-weight: 600;
}

.onboarding-section-col-header img {
  width: 78px;
  margin-bottom: -26px;
}

.onboarding-section-col-header {
  display: flex;
  align-items: center;
  gap: 20px;
  
  margin-bottom: 20px;
}
 
.onboarding-section p {
  font-size: 16px;
}

.onboarding-section-col:last-child {
  background: #141414;
  border-left: 1px solid #666;
  padding-top: 40px;
  padding-bottom: 40px;
}

.onboarding-section-col {
  /* background: #717173; */
  background: transparent;
}

.onboarding-content {
  height: 100%;
}

.onboarding-section {
  height: 100%;
  display: flex;
}

.onboarding-auth-buttons {
  width: 100%;
}
 

/* Modern marquee header for onboarding drawer only */
#onboarding-drawer .onboarding-marquee-header {
  overflow: hidden;
  padding: 0;
  border-bottom: none;
  background: #141414;
  position: sticky;
  top: 0;
  z-index: 3;
  
  display: flex
;
  align-items: center;
  padding: 22px 0;
  font-weight: 300;
}

#onboarding-drawer .marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

#onboarding-drawer .marquee-content {
  display: inline-block;
  animation: marquee 120s linear infinite;
  padding: 0;
  white-space: nowrap;
}

#onboarding-drawer .marquee-content .opaque-text {
  color: #ffffffba;
}
#onboarding-drawer .marquee-content > span {
  display: inline-block;
  font-size: 21px;
  color: #fff;
  margin-right: 36px;
  position: relative;
}

/* Remove the bullets */
#onboarding-drawer .marquee-content > span::after {
  content: "";
  margin-left: 0;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #onboarding-drawer .onboarding-marquee-header {
    height: 40px;
  }
  
  #onboarding-drawer .marquee-content > span {
    font-size: 14px;
    margin-right: 20px;
  }
}


@media (max-width: 1000px) {
  .onboarding-section-cols {
    flex-direction: column;
  }
  
  .onboarding-section {
    height: auto;
    overflow-y: auto;
  }
  
  .onboarding-content {
    height: auto;
    overflow-y: auto;
  }
  
  .drawer-inner {
    overflow-y: auto;
    max-height: 80vh;
  }
  
  .onboarding-section-col {
    width: 100%;
    padding: 20px !important;
  }
  
  .onboarding-section-col:last-child {
    padding: 20px !important;
  }
  
  .ex-image {
    padding: 20px 0;
    transform: scale(0.8);
    transform-origin: center center;
    margin: -14% -10% -18% -10%;
    width: 120%;
  }
}

/* Responsive adjustments using the same variables */
@media (max-width: 1000px) {
  .onboarding-section-col {
    background: #303030;
}

  :root {
    --onboarding-scale: 0.8;
    --image-container-scale: 1.0;
    --floating-image-size: 30%; /* Reduced to ~60% of original 35% */
    --top-right-x: -40px;
    --top-right-y: -50px;
    --top-right-secondary-x: 0px;
    --top-right-secondary-y: -70px;
    --bottom-left-x: -80px; /* Changed from 120px to -80px to move in the opposite direction */
    --bottom-left-y: -70px;
    --main-image-width: 130%;
  }
  
  /* Slow down animation durations on mobile */
  .top-right, .top-right-secondary {
    animation: float-diagonal-1 12s linear infinite; /* Increased from 6s */
  }
  
  .bottom-left {
    max-width: calc(var(--floating-image-size) * 0.8);
  }
  
  /* Scale down 2A and 2B floating images to 50% of their current size */
  .top-right, .top-right-secondary {
    max-width: calc(var(--floating-image-size) * 0.5);
  }
  
  .ex-image {
    padding: 20px 0;
  }
  
  .image-container {
    max-width: 90%;
    margin: 0 auto;
    transform-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .main-image {
    margin: 0 auto;
  }
  
  .onboarding-section-col:first-child {
    overflow: hidden;
}

.onboarding-section-col:last-child {
    border-left: none;
}

.onboarding-section-col-header img {
  width: 42px;
  height: auto;
  margin-bottom: -16px;
}

.onboarding-section-col-header h2 {
  font-size: 26px;
}



.onboarding-section p {
  font-size: 14px;
}

button#start-creating {
  font-size: 12px;
}
}

/* Add a new media query for even smaller screens if needed */
@media (max-width: 600px) {
  :root {
    --onboarding-scale: 0.7;
    --image-container-scale: 1.0;
    --floating-image-size: 18%; /* Reduced to ~60% of original 30% */
    --main-image-width: 140%;
    --bottom-left-x: -60px; /* Changed to move in the opposite direction */
  }
}

/* Add a specific class for mobile scaling of 2A and 2B images */
@media (max-width: 1000px) {
 
  .onboarding-section-col:first-child {
    padding: 0 !important; 
    order: 3 !important;
}
  .mobile-small {
    max-width: 60% !important; /* Base size for mobile-small class */
  }
  
  /* Specific override for the 2B image */
  .top-right-secondary.mobile-small {
    max-width: 150% !important; /* Larger size specifically for 2B */
    width: 150% !important;
    left: -80px !important;
    top: -80px;
  }

  .mobile-medium {
    max-width: 120% !important; /* Medium scaling for Example-3 */
    width: 120% !important;
    left: -30px;
  }
}
.onboarding-section-col:first-child {
  border-left: 1px solid #666;
}
.onboarding-section-col:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* Lighter overlay to see more of the background */
  backdrop-filter: blur(2px); /* Reduced blur */
  -webkit-backdrop-filter: blur(2px); /* For Safari */
  z-index: -1;
}

@media (max-width: 1000px) {
  .onboarding-section-col:first-child {
    border-left: none;
}

  .onboarding-section-col:first-child::before {
    background: rgba(0, 0, 0, 0.2); /* Even lighter on mobile */
    backdrop-filter: blur(1px); /* Minimal blur on mobile */
    -webkit-backdrop-filter: blur(1px);
  }
}
 
 
#prompt-toolbar.hidden {
  display: none;
}

#prompt-toolbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999999;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  padding-right: calc(92px + 30px);
  padding-left: calc(92px + 30px);
}

#prompt-toolbar.visible {
  transform: translateY(0);
  opacity: 1;
}

#prompt-toolbar-inner {
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  cursor: pointer;
  position: relative;
  margin-bottom: 45px;
  width: 100%;
  max-width: 600px;
}

#prompt-toolbar .prompt-toolbar-cancel {
  position: absolute;
  left: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#prompt-toolbar #prompt-toolbar-cancel {
  margin: auto auto auto 20px;
  border-radius: 30px;
  background: #313131;
  color: #fff;
  font-size: 14px;
  padding: 5px 9px;
}

#prompt-toolbar-main {
  width: 100%;
}

#prompt-toolbar-main button {
  position: absolute;
  height: 100%;
  background: none;
  border: none;
  color: #000;
  right: 0;
  padding: 0;
  margin: 0;
  padding-right: 8px;
  z-index: 3;
}

#prompt-toolbar-main button .button-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  border: none;
  background: #8f49ee;
  font-weight: 500;
  border-radius: 39px;
  color: #fff;
  border: 2px outset #b075ff;
  box-shadow: 0 5px 13px rgba(0, 0, 0, .15);
  font-size: 21px;
  padding: 0 17px;
  height: 42px;
}

#prompt-toolbar-main input {
  border: none;
  padding: 13px 170px 13px 21px;
  border-radius: 30px;
  font-size: 21px;
  background: #fff;
  width: 100%;
  position: relative;
  z-index: 2;
  outline: none !important;
}

#prompt-toolbar .prompt-toolbar-message {
  position: absolute;
  bottom: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

#prompt-toolbar .prompt-toolbar-message-inner {
  font-size: 16px;
  background-color: rgb(242 242 242 / 90%);
  border: 1px solid #d6d6d6;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 8px 16px;
}

/* Mobile styles */
@media (max-width: 1000px) {
  #prompt-toolbar {
    padding-right: 15px;
    padding-left: 15px;
  }

  #prompt-toolbar .prompt-toolbar-cancel {
    left: unset;
    right: 8px;
    top: 100%;
  }

  #prompt-toolbar-inner {
    margin-bottom: 60px;
  }

  #prompt-toolbar-main input {
    font-size: 18px;
    padding: 11px 140px 11px 18px;
  }

  #prompt-toolbar #prompt-toolbar-cancel {
    margin-top: 12px;
  }

  #prompt-toolbar-main button .button-inner {
    font-size: 18px;
    padding: 0 14px;
    height: 36px;
  }

  #prompt-toolbar .prompt-toolbar-message-inner {
    font-size: 14px;
    padding: 6px 12px;
  }
}

/* Add transition properties for the controls */
#all-canvas-controls {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#object-toolbar {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Add styles for when prompt is active */
body.prompt-active #all-canvas-controls {
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
}

body.prompt-active #object-toolbar {
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
}

/* Mobile override for info div */
@media (max-width: 768px) {
  body.prompt-active #all-canvas-controls {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  
  body.prompt-active #all-canvas-controls .canvas-controls,
  body.prompt-active #all-canvas-controls #info {
    transform: translateY(-100px);
    opacity: 0;
    pointer-events: none;
  }

  /* Position prompt at top for mobile */
  #prompt-toolbar {
    top: 0;
    bottom: unset;
    transform: translateY(-100px);
  }

  #prompt-toolbar.visible {
    transform: translateY(0);
  }

  #prompt-toolbar-inner {
    margin-bottom: 0;
    margin-top: 60px;
  }

  #prompt-toolbar .prompt-toolbar-cancel {
    top: unset;
    bottom: -100%;
  }
 
  #prompt-toolbar #prompt-toolbar-cancel {
    margin-top: 12px;
    margin-bottom: 0;
  }
}
.saved-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 16px;
}


.saved-item {
  border: 1px solid #dddddd;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}

.saved-item img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* .saved-item:hover {
  transform: scale(1.05);
  transition: transform 0.2s;
} */
.saved-item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: #f0f0f0;
}

.saved-item-info {
  padding: 8px;
  position: relative;
  height: 100%;
}

.saved-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.saved-item-header h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  color: #333333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.saved-items-controls {
  padding: 16px;
  margin: -16px;
}

.sign-in-prompt {
  text-align: center;
  padding: 32px;
}

.sign-in-prompt p {
  margin-bottom: 16px;
  color: #666666;
}

#save-new-item {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

#save-new-item .button-inner,
#save-current-canvas .button-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff912d;
  font-weight: 500;
  border-radius: 30px;
  padding: 5px 13px 6px;
  height: 29px;
  font-size: 13px;
  color: #000;
  transition: 0.2s ease all;
}

@media (hover: hover) and (pointer: fine) {
  #save-new-item .button-inner:hover,
  #save-current-canvas .button-inner:hover {
    background: #111;
    color: #fff;
  }
}

#save-new-item .button-inner:active,
#save-current-canvas .button-inner:active {
  background: #111;
  color: #fff;
}

.saved-item-menu-trigger {
  position: static;
  background: transparent;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  padding: 0;
}

.saved-item-menu-trigger svg {
  width: 16px;
  height: 16px;
  fill: #666;
}

.saved-item-menu-trigger:hover svg {
  fill: #333;
}

.saved-item-menu {
  position: absolute;
  top: 100%;
  top: calc(100% - 20px);
  margin-top: 4px;
  right: 0px;
  cursor: pointer;
  display: none;
  z-index: 100;
  flex-direction: column;
}

.saved-item-menu.active {
  display: flex;
  gap: 6px;
  padding-top: 10px;
}

.saved-item-menu button {
  display: block;
  padding: 8px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: #333;
  font-size: 13px;
}

.saved-item-menu button.restore-canvas {
  background: #4CAF50; /* Green for restore */
  color: white;
  border: 1px solid #3e8e41;
  border-radius: 8px;
  margin-bottom: 0px; /* Add spacing between buttons */
}

.saved-item-menu button.restore-canvas:hover {
  background: #45a049;
}

.saved-item-menu button.delete {
  background: #d02525;
  color: white;
  border: 1px solid #ad0505;
  border-radius: 8px;
}

.saved-item-menu button.delete:hover {
  background: #b01010;
}

.saved-items-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: #666666;
  width: 100%;
  max-width: 505px;
  margin-left: auto;
  margin-right: auto;
}

.saved-items-empty-state p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

p.saved-items-empty-subtitle.first+p.saved-items-empty-subtitle.second {
  margin-top: 14px;
}

.saved-items-empty-state p.saved-items-empty-subtitle {
  margin-top: 18px;
}

.saved-items-empty-state .saved-items-empty-subtitle {
  margin-top: 8px;
  font-size: 13px;
  color: #888888;
}

@media screen and (max-width: 768px) {
  .saved-items-empty-state p {
    font-size: 14px;
  }

  .saved-items-empty-state .saved-items-empty-subtitle {
    font-size: 11px;
  }

  .saved-item-header h3 {
    font-size: 11px;
  }
}

.video-thumbnail {
  position: relative;
  width: 100%;
}

.video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.video-play-overlay svg {
  width: 48px;
  height: 48px;
  fill: white;
}

.video-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80%;
  max-width: 800px;
  background: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 20px;
}

#library-drawer .download-button {
  display: block;
  margin-top: 20px;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
}

#library-drawer .download-button:hover {
  background: #0056b3;
}

.video-generating-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.generating-text {
  font-size: 14px;
  font-weight: 500;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.bulk-actions {
  padding: 12px 16px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  display: none;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.saved-item.selectable {
  position: relative;
}

.saved-item.selectable::before {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  z-index: 1;
  transition: all 0.2s ease;
}

.saved-item.selected::before {
  background: #000;
  border-color: #000;
}

.saved-item.selected::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT48L3N2Zz4=);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

.bulk-delete-button {
  background: #d02525;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 13px;
  margin-left: auto;
}

.bulk-delete-button:disabled {
  background: #999;
  cursor: not-allowed;
}

button#select-items-button .button-inner,
.cancel-selection-button {
  cursor: pointer;
  background: #fff;
  border-radius: 30px;
  color: #111;
  font-weight: 500;
  font-size: 13px;
  display: inline-block;
  border: 1px solid #8b8b8b;
  padding: 3px 12px 4px;
}

@media (hover: hover) and (pointer: fine) {

  button#select-items-button .button-inner:hover,
  .cancel-selection-button:hover {
    background: #000;
    color: #fff;
  }
}

button#select-items-button .button-inner:active,
.cancel-selection-button:active {
  background: #000;
  color: #fff;
}

.select-controls {
  padding: 4px 32px;
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
}

span#bulk-select-label {
  opacity: .6;
  margin-right: 30px;
}

.select-controls {
  padding: 12px 16px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  align-items: center;
  gap: 12px;
}

@media screen and (max-width: 768px) {
  div#bulk-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .bulk-actions-bottom {
    display: flex;
    width: 100%;
  }

  .bulk-delete-button {
    margin-left: 0;
    margin-right: auto;
    width: 100%;
  }

  .bulk-actions-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .bulk-actions-top {
    font-size: 13px;
  }

  button#select-items-button .button-inner,
  .cancel-selection-button {
    font-size: 12px;
    padding: 0px 10px;
  }

  .bulk-delete-button {
    font-size: 12px;
  }

  .saved-items-controls button#select-items-button {
    display: none;
  }

  #saved-items-controls-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 16px;
    background: #fff;
    border-top: 1px solid #ddd;
    display: flex;
    z-index: 4;
  }
}

.saved-items--desktop-only {
  display: inline-block;
}

.saved-items--mobile-only {
  display: none;
}

#select-items-button-mobile {
  margin-left: auto;
  background: transparent;
  border: none;
  padding: 0;
}

#select-items-button-mobile .button-inner {
  cursor: pointer;
  background: #fff;
  border-radius: 14px;
  color: #666;
  border: 1px solid #acacac;
  font-size: 13px;
  display: inline-block;
  padding: 2px 12px;
  font-size: 11px;
  color: #111;
  border-color: #8b8b8b;
}

@media screen and (max-width: 768px) {
  .saved-items--desktop-only {
    display: none;
  }

  .saved-items--mobile-only {
    display: inline-block;
  }

  .saved-items-controls {
    padding: 8px;
    margin: -8px;
  }

  .bulk-actions {
    border-top: 1px solid #ddd;
  }
}

.bulk-select-active button.saved-item-menu-trigger {
  visibility: hidden;
  pointer-events: none;
}

#saved-items-grid.bulk-select-active {
  padding-top: 72px;
}

#bulk-actions {
  display: flex;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 2;
}

@media screen and (min-width: 769px) {
  #bulk-actions {
    top: 90px;
  }
}

@media screen and (max-width: 768px) {
  #bulk-actions {
    bottom: 38px;
  }

  #saved-items-grid.bulk-select-active {
    padding-top: 16px;
  }

  #masterpieces-grid.bulk-select-active {
    padding-top: 16px;
    padding-bottom: 79px; /* Add padding for mobile bulk select */
  }
}

.saved-items-sections {
  display: flex;
  flex-direction: column;
  gap: 0px;
  height: 100%;
}

.saved-items-section:empty {
  display: none;
}

div#saved-items-grid:empty {
  display: none;
}

/* Hide section headers if their grid is empty */
.saved-items-section .drawer-content-header {
  height: 63px;
}

@media screen and (max-width: 768px) {
  div#saved-items-grid .saved-item img {
    height: 60px
  }

  div#masterpieces-grid .saved-item img {
    height: 60px
  }
}


@media screen and (max-width: 768px) {
  .saved-items-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .saved-item-header h3 {
    display: none;
  }

  .saved-item-menu-trigger {
    margin-left: auto;
    margin-right: auto;
    height: 18px;
  }

  .saved-item-menu-trigger svg {
    transform: rotate(90deg);
  }

  .saved-item-info {
    padding: 0;
  }
}

/* Styles for Saved Canvas items */
/* Removed:
   - .saved-canvas img
   - .saved-canvas .saved-item-menu button.load
   - .saved-canvas .saved-item-menu button.delete
   - #saved-canvases-grid specific styles
*/

/* Skeleton UI Loading States */
.skeleton-item {
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  height: auto;
}

.skeleton-item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: skeleton-wave 1.5s ease-in-out infinite;
}

.skeleton-thumbnail {
  width: 100%;
  aspect-ratio: 1;
  background: #e0e0e0;
}

.skeleton-info {
  padding: 12px;
  height: 60px;
}

.skeleton-title {
  height: 20px;
  background: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 8px;
  width: 80%;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes skeleton-wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Load More Button */
.load-more-button {
  width: auto;
  margin: 20px auto;
  padding: 12px 24px;
  background: #ff912d;
  border: 1px solid #de6c05;
  border-radius: 30px;
  color: #000;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  text-align: center;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add spacing between sections when load more button is present */
.saved-items-section {
  margin-bottom: 20px;
}

.saved-items-section:last-child {
  margin-bottom: 0;
}

.load-more-button:hover:not(:disabled) {
  background: #ffab5d;
}

.load-more-button:active {
  background: #ff9f48;
}

.load-more-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.load-more-button .button-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.saved-items-section:last-child {
  padding-bottom: 50px;
}
#text-toolbar.hidden {
  display: none;
}

#text-toolbar {
   position: fixed;
   bottom: 0;
   left: 50%;
   
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 99999999;
   transform: translateY(100px) translateX(-50%);
   opacity: 0;
   transition: transform 0.2s ease, opacity 0.2s ease;
}

#text-toolbar.visible {
  transform: translateY(0) translateX(-50%);
  opacity: 1;
}


#text-toolbar button {
   background: transparent;
   border: none;
   color: #fff;
   padding: 10px 11px;
   display: flex;
   align-items: center;
   justify-content: center;
}

#text-toolbar-inner {
  border: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #000;
  color: #fff;
  border-radius: 30px;
  padding: 0px 16px;
  border: 2px solid #666;
  position: relative;
  margin-bottom: 60px;
  gap: 16px;
}

#text-toolbar-inner .text-icon {
  
  padding-left: 8px;
  color: #8a8a8a;
  font-size: 17px;
}


.text-toolbar-block button {
   font-size: 17px;
 }
 
/* Color indicator box */
.color-indicator {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Text toolbar blocks */
.text-toolbar-block {
  position: relative;
   
}
 
/* Color picker styles */
.color-picker-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  background: #000;
  border-radius: 16px;
  border:2px solid #666;
  padding: 15px;
  margin-bottom: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index: 9999;
   
  color: #fff;
  transform: translateY(10px) translateX(-50%);
}
  
.color-picker-container.open {
  opacity: 1;
  pointer-events: auto !important;
  transform: translateY(0) translateX(-50%);
  animation: dropdown-appear 0.2s ease-out;
}

.color-picker-container.closing {
  opacity: 0;
  transform: translateY(10px) translateX(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.color-picker-panel {
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 250px;
}

.color-picker-gradient {
  height: 150px;
  border-radius: 8px;
  cursor: crosshair;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.color-selector-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: border-color 0.2s ease-in-out;
  z-index: 2;
}

.color-picker-slider {
  padding: 5px 0;
}

.hue-slider {
  width: 100%;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    to right,
    #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
  );
  border-radius: 5px;
  outline: none;
}

.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hue-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-presets {
   width: 100%;
   position: relative;
}

.color-presets-inner {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}

 
.color-preset {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.color-preset:hover {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.color-preset.active {
  border: 2px solid #4a8fff;
  position: relative;
  z-index: 2;
}

/* Color dropper preset styles */
.color-dropper-preset {
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.color-dropper-preset svg {
  width: 12px;
  height: 12px;
}

.color-dropper-preset:hover {
  background-color: #333;
  border-color: #666;
}

.color-dropper-preset:active {
  background-color: #444;
}

/* Font dropdown styles */

/* Font Dropdown Styles */
.font-dropdown-inner {
   position: relative;
   overflow-y: overlay; /* Change from auto to overlay */
   
 }
 
 
  
 .font-option {
   padding: 10px 16px;
   cursor: pointer;
   transition: background-color 0.2s;
   font-size: 16px;
   white-space: nowrap;
   width: 100%;
 }
 .font-option:active {
   background-color: #333;
 }
 @media (hover: hover) and (pointer: fine) {
   
   .font-option:hover {
     background-color: #333;
 
   }
 }
 /* Preload web fonts with zero opacity to prevent FOUT */
 .font-preload {
   position: absolute;
   opacity: 0;
   pointer-events: none;
   left: -9999px;
   bottom: -9999px;
 }
 
 .font-option-selected {
   background-color: #333;
   font-weight: bold;
 }
/* /Font dropdown styles */

/* Add styles for when text toolbar is active */
body.text-toolbar-active #all-canvas-controls {
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
}
 
body.text-toolbar-active #object-toolbar.fixed-toolbar {
 bottom: 80px !important;;
}


/* Mobile override for info div */
@media (max-width: 768px) {
   #text-toolbar-inner {
      margin-bottom: 20px;
      padding: 0 8px;
   }

   #text-toolbar-inner .color-indicator {
      width: 14px;
      height: 14px;
  }   

 

   #text-toolbar-inner {
      gap: 0;
      width: 100%;
      justify-content: space-between;
  }
  
  #text-toolbar-inner .text-icon {
      padding-left: 8px;
      padding-right: 4px;
      font-size: 13px;
  }
  
  #text-toolbar button {
      font-size: 13px;
      padding: 10px;
  }
  
  div#text-toolbar {
      padding: 0 16px;
  }
   
  body.text-toolbar-active #all-canvas-controls {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    
  }
  
  body.text-toolbar-active #all-canvas-controls .canvas-controls {
   margin-bottom: -100%;
  }
  body.text-toolbar-active #all-canvas-controls .canvas-controls,
  body.text-toolbar-active #all-canvas-controls #info {
    pointer-events: none;
  }

  .color-picker-container {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .color-picker-container.open {
    transform: translateX(-50%);
  }

  .color-picker-container {
   padding: 12px;
}

.color-picker-gradient {
   height: 100px;
}

  .color-presets {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
    width: calc(100% + 24px);
    margin-right: -12px;
    margin-left: -12px;
    position: relative;
  }
  
 
/* Add the shadow element styles */
.color-presets-shadow {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 30px;
   pointer-events: none;
   z-index: 2;
   transition: transform 0s ease-in-out;
}

.color-presets-shadow-right {
   right: 0;
   background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}

.color-presets-shadow-left {
   left: 0;
   background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
}

.color-presets-inner::-webkit-scrollbar {
   display: none;
}

.color-presets-inner {
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   scrollbar-width: none;  /* Firefox */
   overflow: scroll;
   height: 30px;
   width: 100%;
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
   gap: 5px;
}

.color-preset {
   min-width: 30px;
}

.color-preset:last-child {
   margin-right: 15px;
}

.color-preset:first-child {
   margin-left: 15px;
}
}

/* Weight and Style dropdown styles */
.weight-style-dropdown {
  background-color: #000000;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  padding: 10px 0;
  margin-bottom: 10px;
  opacity: 1;
  pointer-events: all;
  z-index: 9999;
  border: 1px solid #333;
  color: #fff;
  width: 300px;
}

.weight-style-panels {
  display: flex;
  gap: 10px;
  padding: 0 10px;
}

.weight-panel, .style-panel {
  flex: 1;
  min-width: 0;
  padding-bottom: 10px !important;
}

.dropdown-section-header {
   font-size: 12px;
   font-weight: normal;
   margin-bottom: 8px;
   padding: 12px 0 12px;
   border-bottom: 1px dashed #222;
   width: calc(100% + 20px);
   margin-left: -10px;
   padding-left: 12px;
  
}

.menu-option {
  padding: 7px 11px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  border-radius: 6px;
  font-size: 14px;
  
}

.menu-option:hover {
  background-color: #333;
  transform: translateX(2px);
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.option-selected {
  background-color: #222;
  position: relative;
}
.option-selected::after {
   content: '';
   position: absolute;
   right: 12px;
   transform: translateY(-50%);
   top: 50%;
   width: 14px;
   height: 11px;
   background-image: url("data:image/svg+xml,%3Csvg width='87' height='71' viewBox='0 0 87 71' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.224 70.7759L0.890625 47.4425L8.66663 39.6665L24.224 55.2239L78.6666 0.775879L86.4426 8.55708L24.224 70.7759Z' fill='%23fff'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }

.no-options-message {
  padding: 8px 12px;
  color: #888;
  font-style: italic;
  font-size: 14px;
}

/* Media query for mobile */
@media (max-width: 768px) {
  .weight-style-dropdown {
    width: 260px;
  }
  
  .weight-style-panels {
    gap: 5px;
  }
  
  .menu-option {
    padding: 8px 10px;
  }
} 

/* Font dropdown styles for desktop */
.font-dropdown {
  position: absolute; 
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  
  
  
  padding: 0px 0;
  margin-bottom: 10px;
  z-index: 9999;
  border:2px solid #666;
  color: #fff;
  max-width: 90vw;
  animation: dropdown-appear 0.2s ease-out;
  opacity: 1;
 
  max-height: 300px;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
   
  display: flex;
  overflow: hidden;
  width: 180px;
  text-align: left;
  z-index: 99;


  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  background: #000;
  border-radius: 16px;
  
  /* Add new cursor property to indicate draggability */
  cursor: grab;
}

/* Add a visual indicator at the top of the dropdown */
.font-dropdown::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background-color: #444;
  border-radius: 4px;
  opacity: 0.6;
}

.font-dropdown:active {
  cursor: grabbing;
}

.font-dropdown.closing {
  opacity: 0;
  transform: translateY(10px) translateX(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.font-panel {
   border-right: 1px solid #222;
   padding: 0 10px;
}
.weight-panel {
   padding: 0 10px;
}
.style-panel {
   border-top: 1px solid #222;
   padding: 0 10px;
}

@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(10px) translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}

.all-formatting-panels {
  display: flex;
  flex-direction: row; /* Two columns side by side */
  width: 100%; /* Ensure full width is used */
}

.font-panel {
  min-width: 0;
  width: 50%; /* Adjust width for the font panel to be half */
}

/* Container for weight and style panels stacked vertically */
.weight-style-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 50%; /* Take up half the width */
}

.weight-panel, .style-panel {
  min-width: 0;
  width: 100%; /* Take full width of parent container */
}

.font-list-container {
  max-height: 100%;
   overflow-y: auto;
      
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: #666 #222;
  width: calc(100% + 10px);
  margin-right: -10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.font-list-container::-webkit-scrollbar {
  width: 6px;
}

.font-list-container::-webkit-scrollbar-track {
  background: #222;
  border-radius: 3px;
}

.font-list-container::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 3px;
}
 
.menu-option {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  border-radius: 6px;
  
}

.menu-option:hover {
  background-color: #333;
  transform: translateX(2px);
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.option-selected {
  background-color: #222;
  position: relative;
}

 
.no-options-message {
  padding: 8px 12px;
  color: #888;
  font-style: italic;
  font-size: 14px;
}

/* Media query for mobile */
@media (max-width: 768px) {
  .font-dropdown {
    width: 330px; /* Slightly wider to accommodate the layout */
  }
 
  .font-panel {
    width: 50%; /* Keep font panel taking half width */
  }
  
  .weight-style-container {
    width: 50%; /* Keep weight/style container taking half width */
    gap: 5px; /* Smaller gap on mobile */
  }
  
  .menu-option {
    padding: 5px 7px;
    font-size: 13px;
  }
  
  .dropdown-section-header {
    font-size: 13px;
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  .font-dropdown {
   max-height: 250px;
  }
} 

/* Add subtle hover effects for panel items */
.all-formatting-panels .menu-option {
  transition: all 0.15s ease-out;
}

.all-formatting-panels .menu-option:hover {
  background-color: #333;
  padding-left: 15px;
} 


/* Remove the pseudo-element handle */
.font-dropdown::before {
   content: none;
 }
 
 /* Add styles for the actual handle div */
 .font-dropdown-handle {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: grab;
   z-index: 1;
   background-color: #111;
   border-bottom: 1px solid #222;
 }
 
 .font-dropdown-handle:active {
   cursor: grabbing;
 }
 
 /* Add the visual indicator in the handle */
 .font-dropdown-handle::after {
   content: '';
   width: 40px;
   height: 4px;
   background-color: #444;
   border-radius: 4px;
   opacity: 0.6;
 }
 
 /* Adjust padding for content to make room for handle */
 .all-formatting-panels {
   padding-top: 25px;
 }
 
 /* Fix z-index values to prevent issues */
 .font-dropdown {
   z-index: 1000;
 }

/* Update handle styles for color picker */
.color-picker-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 1001;
  background-color: #111;
  border-bottom: 1px solid #222;
  border-radius: 11px 11px 0 0;
  pointer-events: auto !important;
}

.color-picker-handle:active {
  cursor: grabbing;
}

/* Add the visual indicator in the handle */
.color-picker-handle::after {
  content: '';
  width: 40px;
  height: 4px;
  background-color: #444;
  border-radius: 4px;
  opacity: 0.6;
}

/* Additional style for container to ensure clicks work properly */
.color-picker-container.open {
  opacity: 1;
  pointer-events: auto !important;
  transform: translateY(0) translateX(-50%);
  animation: dropdown-appear 0.2s ease-out;
}

#text-toolbar-inner #text-close-button {
  position: absolute;
  right: -60px; /* Position it offset from the right edge */
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  border: 2px solid #666;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 1; /* Lower than parent but still visible */
  padding: 0;
  line-height: 1;
}

#text-toolbar-inner #text-close-button:hover {
  background-color: #333;
}

#text-close-button svg * {
   fill: #fff;
}

#text-close-button svg {
   width: 20px;
   height: auto;
}

button#text-close-button > span {
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Mobile override for close button */
@media (max-width: 768px) {
  #text-toolbar-inner #text-close-button {
    top: -32px;
    right: 50%;
    margin-right: -20px;
  }

  
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

strong {
  font-weight: bold;
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

/* End Reset */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Body */
body {
  background: #DADFED;
  transition: background-color 0.3s ease;
  background-repeat: no-repeat;
    
    
    background-image: radial-gradient(#E9DFDA 33%, #F3F2F1 67%);
    color: rgb(25, 31, 31);
}

body * {
  font-family: 'Space Mono', monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.02em;
}

/* End Body */

.relative {
  position: relative;
}

.canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  /* Ensure canvas is above segmentation map */
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.face-detection-rect {
  position: absolute;
  z-index: 3;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  padding: 5px 9px;
  pointer-events: none;
}

.model-status-message.face-detection-cancel svg {
  height: auto;
  width: 7px;
  margin-left: 6px;
}

.model-status-message.face-detection-cancel {
  display: flex;
  position: absolute;
  top: -24px;
  padding-right: 9px;
  right: -22px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 5;
}

.model-status-message.face-detection-cancel {
  background: #000;
  color: #fff;
}

.model-status-message.face-detection-cancel svg {
  fill: #fff;
}

.model-status-message.toast-error {
  background: #ff4f4f;
  color: #fff;
}

.model-status-message.toast-size-bg {
  background: #66B2FF;
  color: #fff;
}

.model-status-message.toast-error svg {
  width: 10px !important;
  margin-top: 7px;
}

.model-status-message.toast-success-bg {
  background: #3ff88c;
  color: #000;
}

.model-status-message.toast-success svg {
  fill: #000;
  opacity: 0.7;
}

.face-detection-rect-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 10px;
}

.face-detection-rect-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 200px;
  transition: 0.3s ease-out;
  overflow: hidden;
  animation: shimmer 13s infinite linear;
  background: linear-gradient(to right, rgb(239 241 243 / 15%) 4%, rgb(226 226 226 / 40%) 25%, rgb(239 241 243 / 15%) 44%), rgb(226 226 226 / 20%) 78%;
}

.model-status-message.face-detection-event {
  position: absolute;
  right: 5px;
  top: 4px;
  text-wrap: nowrap;
}

.canvas-control {
  position: relative;
}

.canvas-control-button {
  background: transparent;
  border: none;
  padding: 0;
}

.canvas-control-button svg {
  height: auto;
  width: auto;
}

.canvas-control-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.canvas-control[data-control="search"] {
  border: none;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  cursor: pointer;
  position: relative;
}

.canvas-control[data-control="search"] input {
  border: none;
  padding: 10px 27px 10px 16px;
  border-radius: 30px;
  font-size: 16px;
  background: #fff;
  border: 1px solid #cbc7c4;
  width: 100%;
  padding-right: 63px;
  position: relative;
  z-index: 2;
  outline: none !important;
}

/* floatingLabel.style.opacity = '0';
             floatingLabel.style.top = '50%';
             floatingLabel.style.transform = 'translateY(-50%)'; */
.canvas-control .floating-label {
  position: absolute;
  pointer-events: none;
  left: 50%;
  background: rgb(255 255 255 / 50%);
  transition: 0.2s ease all;
  opacity: 1;
  font-size: 14px;
  color: #000;
  padding: 4px 8px;
  border-radius: 10px;
  text-wrap: nowrap;
  z-index: 1;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
}

.canvas-control[data-control="search"] .floating-label {
  left: 26px;
  transform: translateY(-50%);
}

.canvas-control[data-control="search"] input:focus+.floating-label,
.canvas-control[data-control="search"] input:not(:placeholder-shown)+.floating-label,
.canvas-control[data-control="search"] .input-focused .floating-label {
  opacity: 1;
  top: -30px;
  transform: translateY(0);
}

.canvas-control[data-control="search"] input:focus::placeholder {
  opacity: 0;
}

.canvas-control .button-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  border: none;
  background: #ff912d;
  border: 1px solid #de6c05;
  font-weight: 500;
  border-radius: 30px;
  padding: 5px 13px 6px;
  height: 29px;
  font-size: 13px;
  color: #000;
}

.canvas-control button {
  padding: 16px;
  margin: -16px;
}

.canvas-control[data-control="search"] button {
  position: absolute;
  height: 100%;
  background: none;
  border: none;
  color: #000;
  right: 0;
  padding: 0;
  margin: 0;
  padding-right: 6px;
  z-index: 3;
}

.canvas-control button:focus,
.canvas-control button:active {
  outline: none;
}

.canvas-control .button-inner.bigger {
  font-size: 16px;
  padding: 0 13px;
  height: 32px;
}

.canvas-control .button-inner {
  transition: 0.2s ease all;
}

@media (hover: hover) and (pointer: fine) {
  .library-button:hover {
    background-color: #ffe983;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08),
      0 0 20px rgba(255, 232, 131, 0.2)
  }

  .library-button:hover::before {
    background-color: #ffe983;
  }

  .account-button:hover {
    background-color: #c0c0c0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08),
      0 0 20px rgba(255, 232, 131, 0.2)
  }

  .account-button:hover::before {
    background-color: #c0c0c0;
  }

  .account-button.logged-in:hover {
    background-color: #51ff9a;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08),
      0 0 20px rgba(131, 255, 167, 0.2)
  }

  .account-button.logged-in:hover::before {
    background-color: #51ff9a;
  }
}

.library-button:active {
  background-color: #ffe983;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08),
    0 0 20px rgba(255, 232, 131, 0.2)
}

.library-button:active::before {
  background-color: #ffe983;
}

.account-button:active {
  background-color: #c0c0c0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08),
    0 0 20px rgba(255, 232, 131, 0.2)
}

.account-button:active::before {
  background-color: #c0c0c0;
}

.account-button.logged-in:active {
  background-color: #51ff9a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08),
    0 0 20px rgba(131, 255, 167, 0.2)
}

.account-button.logged-in:active::before {
  background-color: #51ff9a;
}

@media (hover: hover) and (pointer: fine) {
  #info .info-button-group .button-inner:hover {
    background: rgb(176 176 176 / 70%);
  }
}

#info .info-button-group button:active .button-inner {
  background: rgb(176 176 176 / 70%);
}

@media (hover: hover) and (pointer: fine) {

  button.nav-button.next .nav-button-icon:hover svg>rect:first-child,
  button.nav-button.prev .nav-button-icon:hover svg>rect:first-child {
    fill: #e3e3e3;
  }
}

button.nav-button.next:active .nav-button-icon svg>rect:first-child,
button.nav-button.prev:active .nav-button-icon svg>rect:first-child {
  fill: #dcdcdc;
}

#confirm-image {
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  #confirm-image:hover {
    opacity: 0.5;
  }
}

#confirm-image:active {
  opacity: 0.5;
}

#cancel-image {
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  #cancel-image:hover {
    opacity: 0.5;
  }
}

#cancel-image:active {
  opacity: 0.5;
}

@media (hover: hover) and (pointer: fine) {
  #object-toolbar button:not(.no-hover):hover {
    background-color: #313131;
  }
}

#object-toolbar button:not(.no-hover):active {
  background-color: rgb(46, 46, 46);
  ;
}

@media (hover: hover) and (pointer: fine) {
  .canvas-control button .button-inner:hover {
    background-color: #ffab5d;
  }
}

.canvas-control button:active .button-inner {
  background-color: #ff9f48;
}

#all-canvas-controls {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  /* padding: 24px; */
  padding: 42px 42px 24px;
  pointer-events: none;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  transition: 0.2s ease all;
}

#all-canvas-controls button,
.canvas-controls input {
  pointer-events: auto;
}

.canvas-controls {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-end;
  gap: 18px;
}

.loading-spinner-wrap {
  position: relative;
  display: none;
  border: none;
  padding: 8px 27px;
  border-radius: 30px;
  font-size: 21px;
  background: #fff;
  width: 200px;
  padding-right: 63px;
  height: 44px;
  vertical-align: bottom;
}

@media (max-width: 768px) {
  .loading-spinner-wrap {
    height: 40.5px;
  }
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #ff912d;;
  border-radius: 50%;
  animation: spin_search 1s linear infinite;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.loading-spinner.no-position {
  position: absolute;
  left: unset;
}

@keyframes spin_search {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }

  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

.canvas-control[data-control="search"] input:disabled {
  background-color: #f0f0f0;
}

.canvas-control[data-control="search"] button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#image-navigation-inner {
  
  background: #fff;
  border:1px solid #cbc7c4;
  padding: 10px;
  flex-direction: column-reverse;
  display: flex;
  border-radius: 21px;
  
}

.nav-label {
  font-size: 15px;
  display: block;
  text-align: center;
  padding: 9px 4px 0;
}

.image-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.nav-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-button.clicked .key-top {
  fill: #666;
}

#confirm-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  border: none;
  background: #000;
  color: #fff;
  padding: 0;
  width: 94px;
  height: 32px;
  font-weight: 500;
  font-size: 16px;
  border-radius: 30px;
  position: relative;
}

#cancel-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  border: none;
  background: rgb(176 176 176 / 50%);
  border: 1px solid rgb(143 139 136 / 35%);
  color: #000;
  padding: 0;
  width: 72px;
  height: 24px;
  font-weight: 500;
  font-size: 14px;
  border-radius: 30px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
}

button.nav-button {
  position: absolute;
  bottom: 9px;
  height: 60px;
  width: 60px;
  
}


#image-navigation-badge:empty {
  display: none;
}
#image-navigation-badge {
  margin-bottom: 12px;
  margin-top: 4px;
  gap: 6px;
}

#image-navigation-badge .app-meme-badge,
#image-navigation-badge .hq-meme-badge {
  display: inline-block;
}
#image-navigation-badge .app-meme-badge svg,
#image-navigation-badge .hq-meme-badge svg {
  height: 19px;
  width: auto;
}


button.nav-button.prev {
  left: -75px;
}

button.nav-button.next {
  right: -75px;
}

span.nav-button-icon svg {
  width: 36px;
  height: auto;
}

span.nav-button-icon {
  display: flex;
}

#font-scale-container {
  align-items: center;
  margin-top: 10px;
}

#font-scale-slider {
  width: 100px;
  margin: 0 10px;
}

#font-scale-value {
  min-width: 30px;
  text-align: right;
}

/* disable highlighting */
.canvas-control *,
.no-highlight,
.no-highlight * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.canvas-control-group {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
}

@media (min-width: 769px) {
  .canvas-controls {
    flex-direction: column;
  }

  /* .canvas-control-group:first-child {
     justify-content: flex-start;
   } */
}

@media (max-width: 768px) {
  .canvas-control-group {
    gap: 14px;
  }

 #secondary-control-buttons .canvas-control .button-inner {
    font-size: 12px;
}
  #all-canvas-controls {
    padding: 16px;
  }

  .canvas-control[data-control="search"] input {
    font-size: 15px;
    padding: 9px 20px;
    min-width: 67svw;
  }

  .canvas-controls {
    flex-direction: column;
    gap: 16px;
  }
}

/* ********************
  * Dimensional grid background *
  ******************** */
.dimensional-grid-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background-color: #dadfed;
}

svg.dimensional-grid {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: transparent;
  z-index: 1;
  transition: filter 0.2s ease-in-out; /* Smooth transition for filter change */
}

svg.dimensional-grid.mobile {
  display: none;
}

@media (max-width: 431px) and (min-width: 411px) {
  svg.dimensional-grid {
    width: 130%;
    height: 130%;
    left: -15%;
    top: -15%;
  }
}

@media (max-width: 431px) {
  svg.dimensional-grid.mobile {
    display: block;
  }

  svg.dimensional-grid.desktop {
    display: none;
  }
}

@media (max-width: 389px) {
  svg.dimensional-grid.mobile {
    width: 122%;
    left: -11%;
    height: 122%;
    top: -11%;
  }
}

/* ********************
  * Info AI Status *
  ******************** */
#info {
  display: flex;
  align-items: center;
}

#info-inner {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  background: transparent;
  cursor: pointer;
  border: none;
}

#info #info-inner-content {
  pointer-events: none;
  background: #e6e9f3;
  font-weight: 500;
  border-radius: 30px;
  padding:5px 9px 5px 4px;
  height: 29px;
  font-size: 13px;
   
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border: 1px solid rgb(143 139 136 / 65%);
}

#info .status-dot {
  width: 14px;
  height: 14px;
  display: block;
  position: relative;
  margin-left: 5px;
}

#info .status-dot::before {
  content: "";
  height: 14px;
  width: 14px;
  position: absolute;
  left: 1%;
  top: 50%;
  border-radius: 100%;
  background-color: #00ff6a;
  filter: blur(3px);
  transform: translateY(-50%);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: filter, background-color;
}

#info .status-dot.loading::before {
  background-color: rgb(229, 151, 0);
  filter: blur(2.9px);
}

#info .status-dot.not-loading::before {
  background-color: rgb(244, 82, 82);
  filter: blur(3.1px);
}

#info #info-messages {
  width: 300px;
}

#info .model-status-messages {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  margin-bottom: 9px;
  margin-left: 14px;
  z-index: 1;
  gap: 7px;
}

#info .model-status-logo {
  min-width: 70px;
}

#info .model-status-logo a {
  pointer-events: auto;
  display: block;
  cursor: pointer;
}

#info .model-status-logo svg {
  height: 11px;
  width: auto;
  margin-left: 7px;
  margin-right: 7px;
  margin-top: 2px;
}

#info .model-status-logo svg * {
  fill: #000;
  opacity: .5;
}

.model-status-message {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  cursor: pointer;
  border: none;
  background: #b0b0b0;
  font-weight: 500;
  border-radius: 14px;
  padding: 5px 9px;
  padding-right: 24px;
  position: relative;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  transition: all 0.3s ease-out;
}

.model-status-message.fade-out {
  opacity: 0;
  height: 0 !important;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
}

.model-status-message .toast-spinner {
  position: absolute;
  top: 10px;
  right: 7px;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  ;
  border-top: 1px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.model-status-message .toast-icon {
  position: absolute;
  right: 7px;
  margin-top: -5px;
  width: 10px;
  font-size: 20px;
}

.model-status-message .toast-icon svg {
  width: 11px;
  height: auto;
  opacity: .5;
}

.model-status-message.toast-warning-bg {
  background: #ffdf4e;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.toast-action-message {
  position: relative;
  background: #3ff88c;
  /* Same as toast-success-bg */
  color: #000;
}

#info .info-text-container {
  min-width: 70px;
}

#info .info-button-group {
  display: flex;
  gap: 10px;
  margin-left: 30px;
}

#info .info-button-group .button-inner {
  background: rgb(176 176 176 / 50%);
  border: 1px solid rgb(143 139 136 / 35%);
}

#info .info-button-group svg {
  width: 14px;
  height: auto;
  margin-bottom: -1px;
}

#info .info-button-group .canvas-control-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.info-button-group {
  pointer-events: none;
}

.info-button-group button {
  pointer-events: auto;
}

.info-button-group .canvas-control-button {
  touch-action: manipulation;
}

@media (min-width: 769px) {
  #info .model-status-messages {
    bottom: 100%;
  }
}

@media (max-width: 768px) {
  #info .info-button-group {
    margin-left: auto;
  }

  #info,
  #info-inner {
    width: 100%;
  }

  #info {
    position: fixed;
    top: 0;
    right: 0;
    padding: 16px;
  }

  #info .model-status-messages {
    top: 100%;
    margin-bottom: 0;
    margin-top: 14px;
    margin-left: 0;
    left: 0px;
    align-items: flex-start;
    flex-direction: column-reverse;
    width: 49svw;
  }
}
 

#object-toolbar input[orient="vertical"] {
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
  width: 16px;
  vertical-align: bottom;
  height: unset;
}

#eraser-size-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#segment-face-button.failed {
  background-color: #e74c3c;
  color: white;
}

#segment-button.segmented,
#object-toolbar button.active {
  /* background-color: #4CAF50; /* or any color to indicate active state */
  color: white;
}

#object-toolbar button.active::after {
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border: 2px solid #000;
  position: absolute;
  content: '';
  border-radius: 34px;
}

#object-toolbar button.active {
  position: relative;
}

#segment-button-divider {
  width: 1px;
  height: 100%;
  background: rgb(174 181 198);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
}

#erasing-badge,
#segment-badge,
#magic-badge,
#magic-face-badge,
.menu-badge,
#additional-settings-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  padding: 3px 14px 3px 14px;
  transition: 0.3s ease-out;
  overflow: hidden;
}

#additional-settings-badge {
  background-color: #999999;
}

#erasing-badge {
  background-color: #ff4f4f;
}

#segment-badge {
  background-color: #ffdf4e;
}

#magic-badge {
  background-color: #8f49ee;
  color: #fff;
  margin-left: auto;
}

#magic-face-badge {
  background-color: #8f49ee;
  color: #fff;
  margin-left: auto;
}

#crop-badge {
  background: #8f49ee;
  color: #fff;
}

#crop-badge svg {
  filter: invert(1);
}

#snipe-badge {
  background: #0084e2;
  color: #fff;
}

#snipe-badge.pluck-against {
  background: #df1d61;
}

#snipe-badge svg {
  filter: invert(1);
}

#erasing-badge svg,
#segment-badge svg,
#magic-badge svg,
.menu-badge svg {
  height: 16px;
  width: auto;
  margin-right: 8px;
}

#object-toolbar-inner {
  flex-wrap: nowrap;
  display: flex;
}

#eraser-size {
  margin-left: 10px;
  align-items: center;
  font-size: 12px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
}

#eraser-size label {
  position: absolute;
  bottom: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  background: #b0b0b0;
  border-radius: 14px;
  padding: 3px 14px 3px 14px;
  transition: 0.3s ease-out;
  overflow: hidden;
}

input#eraser-size-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #b0b0b0;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input#eraser-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #F9524E;
  cursor: pointer;
}

#object-toolbar-inner .flex-buttons {
  display: flex;
  gap: 10px;
}

#object-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 500;
  height: 29px;
  font-size: 13px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, .15);
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  background: #000;
  color: #fff;
  border-radius: 30px;
  padding: 3px 13px 4px;
  border: 1px solid #666;
  white-space: nowrap;
}

#object-toolbar button#confirm-erasing,
#object-toolbar button#confirm-cropping,
#object-toolbar button#confirm-snipe,
#object-toolbar button#confirm-masking {
  background: #777;
}

#object-toolbar button .text-icon {
  display: inline-block;
  opacity: 0.5;
  margin-right: 6px;
}

#segment-menu {
  display: flex;
  gap: 10px;
}

.segment-menu-buttons {
  display: flex;
  gap: 10px;
}

#segment-snipe-buttons {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  div#segment-menu {
    flex-direction: column;
  }

  div#segment-badge {
    margin-right: auto;
  }

  .segment-menu-buttons {
    gap: 4px;
  }

  #object-toolbar-inner .flex-buttons {
    gap: 4px;
  }

  #object-toolbar button {
    font-size: 12px;
    padding: 5px 9px;
    height: 27px;
    vertical-align: top;
  }
}

.failed-badge {
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  transition: all 0.3s ease-out;
  overflow: hidden;
  display: flex;
  position: absolute;
  top: -24px;
  padding-right: 9px;
  right: -22px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 5;
  background-color: #e74c3c;
  color: white;
}

#segment-face-button[data-face-detection-failed="true"] {
  background: red;
  pointer-events: none;
  cursor: not-allowed;
}

#segment-menu-container[data-segment-state="face"] #segment-face-button[data-face-detection-failed="false"][data-face-detection-completed="true"] {
  background: green;
}

.default-buttons.flex-buttons {
  flex-direction: column-reverse;
}

#cursor-canvas {
  display: block;
}

@media (hover: none) and (pointer: coarse) {
  #cursor-canvas {
    display: none;
  }
}

#object-toolbar.rotate-visible button#rotate-button {
  opacity: .6;
}

div#object-toolbar.below {
  margin-top: 40px;
}

.canvas-container.mask-mode {
  cursor: none !important;
}

#mask-size {
  margin-left: 10px;
  align-items: center;
  font-size: 12px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
}

#mask-size label {
  position: absolute;
  bottom: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  background: #b0b0b0;
  border-radius: 14px;
  padding: 3px 14px 3px 14px;
  transition: 0.3s ease-out;
  overflow: hidden;
}

input#mask-size-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #b0b0b0;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input#mask-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #66B2FF;
  cursor: pointer;
}

/* Add masking badge styles similar to erasing badge */
#masking-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  padding: 3px 14px 3px 14px;
  transition: 0.3s ease-out;
  overflow: hidden;
  background-color: #66B2FF;
}

#masking-badge svg {
  height: 16px;
  width: auto;
  margin-right: 8px;
}


.info-container {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
 
  
.account-button-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-button {
  pointer-events: auto;
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  
background: rgb(176 176 176 / 50%);
border: 1px solid rgb(143 139 136 / 35%);
  padding: 4px 5px 5px;
  border-radius: 30px;
  position: relative;
}


 
.account-button.logged-in::before {
  background: #00ff6a;
}

.account-button>svg {
  width: 20px;
  height: auto;
}

.account-button:hover {
  color: rgba(255, 255, 255, 0.9);
}

.account-button.logged-in {
  color: #000;
  background: #00ff6a;
  ;
}
 

.account-button>svg * {
  fill: #000;
}

.account-button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-button {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  padding: 4px 5px 5px;
  border-radius: 30px;
  box-shadow: inset 0 0 9px rgba(0, 0, 0, .3);
  position: relative;
  border: none;
  cursor: pointer;
  margin-left: 8px;
  width: 30px;
  height: 30px;
}

.help-button::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  filter: blur(3px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: 50%;
  transition: filter 0.2s ease;
}

.help-button svg {
  width: 20px;
  height: auto;
}

.help-button svg * {
  fill: #111;
}

.library-button {
  pointer-events: auto;
  cursor: pointer;
}

.library-button {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffdf4e;
  border: 1px solid #deba26;
  padding: 4px 4px 4px;
  width: 30px;
  border-radius: 30px;
  /* box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(255, 223, 78, 0.4); */
  position: relative;
}
/* 
.library-button::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #ffdf4e;
  filter: blur(3px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: 50%;
  transition: filter 0.2s ease;
} */
/* 
.library-button:hover::before {
  filter: blur(6px);
} */

.library-button.logged-in::before {
  background: #00ff6a;
}

.library-button svg {
  width: 21px;
  height: auto;
}

.library-button:hover {
  color: rgba(255, 255, 255, 0.9);
}

.library-button.logged-in {
  color: #000;
  background: #00ff6a;
  ;
}

.library-button.logged-in::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #00ff6a;
  filter: blur(3px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: 50%;
  transition: filter 0.2s ease;
}

.library-button.logged-in:hover::before {
  filter: blur(9px);
}

.library-button svg * {
  fill: #000;
}
 

/* .disabled-feature {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
} */
/* Override pointer-events for the button itself to show the message */
button.disabled-feature {
  pointer-events: auto;
}

.magic-icon {
  width: auto;
  height: 21px;
  margin-right: 4px;
  margin-left: -3px;
}

.magic-icon * {
  fill: #fff;
}

/* 
a.account-button.logged-in img {
  width: 30px;
  height: auto;
}
a.account-button.logged-in {
  padding: 0;
} */
.toast-cancel-button {
  margin-left: 10px;
  padding: 4px 8px;
  border: none;
  border-radius: 12px;
  background: #000;
  color: white;
  cursor: pointer;
  font-size: 10px;
  pointer-events: auto;
  margin-right: -15px;
}

button.toast-cancel-button svg {
  height: 12px;
  width: auto;
  fill: #fff;
}

button.toast-cancel-button {
  display: flex;
}

button#segment-snipe-button svg,
button#segment-snipe-against-button svg {
  width: 15px;
  height: auto;
  fill: #fff;
  margin-right: 7px;
}

#snipe-badge svg {
  height: 17px;
  margin-top: 2px;
}

/* Mobile toolbar */
#object-toolbar.fixed-toolbar button {
  box-shadow: 0 0 30px rgba(218, 223, 237, 0.2);
}

#object-toolbar.fixed-toolbar {
  position: fixed !important;
  right: 16px !important;
  left: unset !important;
  top: unset !important;
  bottom: 130px !important;
}

#object-toolbar.fixed-toolbar div#snipe-menu {
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px !important;
}

 

/* 
@media (min-width: 769px) {
  #object-toolbar.fixed-toolbar {
    bottom: 180px !important;
  }
} */
#object-toolbar.fixed-toolbar .object-buttons.flex-buttons {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px !important;
}

#object-toolbar.fixed-toolbar #segment-menu,
#object-toolbar.fixed-toolbar .segment-menu-buttons {
  flex-direction: column;
  align-items: flex-end;
}

#object-toolbar.fixed-toolbar #segment-menu .segment-menu-buttons {
  gap: 8px !important;
  flex-direction: column;
  align-items: flex-end;
}

#object-toolbar.fixed-toolbar div#crop-menu {
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px !important;
}

#object-toolbar.fixed-toolbar div#segment-snipe-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

#object-toolbar.fixed-toolbar #mask-size label {
  bottom: unset;
  top: -35px;
}

#object-toolbar.fixed-toolbar #eraser-size label {
  bottom: unset;
  top: -35px;
}

#object-toolbar.fixed-toolbar button#segment-snipe-against-button {
  top: unset;
  left: unset;
  position: relative;
}

#object-toolbar.fixed-toolbar .additional-settings-menu-buttons {
  flex-direction: column;
  align-items: flex-end;
}

#object-toolbar.fixed-toolbar div#additional-settings-badge {
  align-self: flex-end;
  display: none;
}

#object-toolbar.fixed-toolbar .additional-setting-opacity-slider {
  justify-content: flex-end;
  margin-bottom: 18px;
}

#object-toolbar.fixed-toolbar .eraser-buttons.flex-buttons {
  flex-direction: column-reverse;
  gap: 8px !important;
  align-items: flex-end;
  padding-bottom: 50px;
}

#object-toolbar.fixed-toolbar[data-menu-mode="eraser"] #object-toolbar-inner,
#object-toolbar.fixed-toolbar[data-menu-mode="mask"] #object-toolbar-inner {
  flex-direction: column;
}

#object-toolbar.fixed-toolbar #erasing-badge,
#object-toolbar.fixed-toolbar #segment-badge,
#object-toolbar.fixed-toolbar .menu-badge,
#object-toolbar.fixed-toolbar #additional-settings-badge {
  align-self: flex-end;
  margin-right: 0px;
}

#object-toolbar.fixed-toolbar .mask-buttons.flex-buttons {
  flex-direction: column-reverse;
  align-items: flex-end;
  padding-bottom: 50px;
  gap: 8px !important;
}

#object-toolbar.fixed-toolbar div#masking-badge {
  align-self: flex-end;
}

#all-canvas-controls:has(+ #object-toolbar.fixed-toolbar[data-menu-mode="eraser"]),
#all-canvas-controls:has(+ #object-toolbar.fixed-toolbar[data-menu-mode="mask"]) {
  display: none !important;
}

#object-toolbar.fixed-toolbar[data-menu-mode="eraser"],
#object-toolbar.fixed-toolbar[data-menu-mode="mask"] {
  bottom: 40px !important;
  width: calc(100% - 32px) !important;
}

#object-toolbar.fixed-toolbar #mask-size-container {
  width: 100%;
}

#object-toolbar.fixed-toolbar #eraser-size {
  margin-left: 0;
  width: 100%;
}

#object-toolbar.fixed-toolbar #mask-size {
  width: 100%;
  margin-left: 0;
}

/* need to adjust this code snippet too */
@media (min-width: 769px) {
  button#segment-snipe-against-button {
    position: absolute;
    left: 16px;
    top: -28px;
  }
}

/* end mobile toolbar */
#object-toolbar:not(.fixed-toolbar) button#segment-snipe-against-button {
  position: absolute;
  left: 16px;
  top: -28px;
  font-size: 10px;
  height: 22px;
  padding: 3px 10px 4px;
}

div#segment-snipe-buttons {
  position: relative;
}

#object-toolbar:not(.fixed-toolbar) button#segment-snipe-against-button svg {
  height: 11px;
  margin-right: 5px;
  opacity: 1;
}

div#object-toolbar.below button#segment-snipe-against-button {
  top: unset;
  bottom: -28px;
}

button#segment-snipe-against-button svg * {
  fill: #fff;
}

@media (max-width: 768px) {
  #mask-size label {
    bottom: unset;
    top: -32px;
  }

  #eraser-size label {
    bottom: unset;
    top: -32px;
  }
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
  padding: 1rem;
  align-items: center;
}

.pagination .page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination a,
.pagination span.current {
  padding: 0.5rem 1rem;
  border: 2px solid #c2c2c2;
  border-radius: 0.5rem;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.pagination span.current {
  background: #ddd;
  color: #444;
  border-color: #8d8d8d;
}

.pagination a:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: #5f5f5f;
}

.pagination .gap {
  border: none;
}

@media (max-width: 768px) {
  .pagination {
    gap: 0.25rem;
  }

  .pagination a,
  .pagination span.current {
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
  }

  .pagination {
    margin: 0 auto;
  }
}

.pagination span.last {
  display: none;
}

.pagination span.page.gap {
  display: none;
}

.pagination .page {
  display: none;
}

.pagination .page.current {
  display: block;
}

.pagination {
  margin-bottom: 0;
  margin-top: 10px;
}

span.meme-year {
  background: #f0f0f0;
  padding: 4px;
  font-size: 12px;
  border-radius: 5px;
  /* margin-left: 6px; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  margin-left: auto;
}

.meme-info {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

button#additional-settings-button svg {
  fill: #fff;
  width: 25px;
  height: auto;
}

#additional-settings-menu-container {
  display: none;
}

#additional-settings-menu {
  display: flex;
  gap: 10px;
  align-items: center;
}

#additional-settings-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

#additional-settings-badge svg {
  width: 16px;
  height: 16px;
}

.additional-settings-menu-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.additional-setting-opacity-slider {
  margin-left: 10px;
  align-items: center;
  font-size: 12px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 29px;
}

.additional-setting-opacity-slider label {
  position: absolute;
  bottom: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  background: #999999;
  border-radius: 14px;
  padding: 3px 14px 3px 14px;
  transition: 0.3s ease-out;
  overflow: hidden;
}

.additional-setting-opacity-slider .opacity-icon {
  width: 16px;
  height: 16px;
}

input#opacity-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #b0b0b0;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input#opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #000000;
  cursor: pointer;
}

.legal-document {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-size: 1rem;
  line-height: 1.5rem;
}

.legal-document h1 {
  font-size: 2em;
  line-height: 2.5rem;
  
  margin-bottom: 0.5em;
}

.legal-document h2 {
  font-size: 1.5em;
  line-height: 2rem;
  
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.legal-document p,
.legal-document ul {
  margin-bottom: 1em;
}

.legal-document ul {
  padding-left: 2em;
}

#magic-menu-container {
  display: none;
}

#magic-menu-container .magic-menu-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button#magic-button svg {
  width: auto;
  height: 21px;
  margin-right: 5px;
}

#magic-menu button {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  #magic-menu-container .magic-menu-buttons {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  #magic-menu-container .magic-menu-buttons.extra-gap {
    gap: 12px;
  }

}

.pro-required-badge {
  position: absolute;
  top: -26px;
  left: 10px;
  background: #666;
  padding: 1px 6px 2px;
  border-radius: 10px;
  font-size: 12px;
}

@media screen and (max-width: 768px) {
  .pro-required-badge {
    left: unset;
    right: -8px;
    top: -11px;
    font-size: 10px;
    padding: 0 4px;
  }

}


button#segment-split-by-transparency-button > svg {
  fill: #fff;
  width: auto;
  height: 21px;
  margin-right: 4px;
  margin-left: -3px;
}



.account-pro-badge {
  position: absolute;
  top: 100%;
  margin-top: -5px;
  display: block;
}

.account-pro-badge svg {
  width: 42px;
  height: auto;
}


@media screen and (max-width: 768px) {
  .account-pro-badge {
    margin-top: 0;
    bottom: 100%;
    top: unset;
    margin-bottom: -12px !important;
  }
}


#toggle-text-font {
  position: relative;
}
 


.canvas-control[data-control="upload"] .upload-button-inner {
  
  padding: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  transition: all 0.2s ease;
  display: flex
;
  align-items: center;
  justify-content: center;
  
  padding: 4px 4px 4px;
  border-radius: 30px;
  background: #b0b0b0;
  box-shadow: 0 4px 10px rgb(0 0 0 / 30%), 0 0 20px rgb(199 199 199 / 40%);
  position: relative;
}



.canvas-control[data-control="upload"] .upload-button-inner  svg {
  width: 20px;
height: auto;
}

.canvas-control[data-control="upload"] button.canvas-control-button {
cursor: pointer;
}


 
.canvas-control[data-control="upload"] button {
 padding: 12px;
 margin: -12px;
}

.canvas-control[data-control="upload"] {
  align-self: center;
}
 


 /* Eraser history buttons styling */
 .eraser-history-buttons svg {
  width: 14px;
  height: auto;
  margin-bottom: -1px;
}
.eraser-history-buttons {
  display: flex;
  gap: 8px;
  margin: 0 10px;
}

.eraser-control-button {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s ease all;
  padding: 0;
}

.eraser-button-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(176 176 176 / 50%);
  border: 1px solid rgb(143 139 136 / 35%);
  cursor: pointer;
  border-radius: 30px;
  padding: 5px 13px 6px;
  font-size: 13px;
  height: 29px;
}

.eraser-control-button.disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.eraser-control-button:hover:not(.disabled) .eraser-button-inner {
  background: rgb(176 176 176 / 70%);
}

.eraser-undo-icon, .eraser-redo-icon {
  width: 14px;
  height: auto;
  margin-bottom: -1px;
}


#object-toolbar.fixed-toolbar .eraser-history-buttons {
  order: -1;
  margin-top: 5px;
  margin-bottom: 5px;
}

button#segment-crop-button > svg {
  width: 14px;
    height: auto;
    fill: #fff;
    margin-right: 7px;
 
}

button#segment-crop-button > svg * {
    fill: #fff;
}




#undo-button.canvas-control-button .button-inner,
#redo-button.canvas-control-button .button-inner {
    padding-left: 18px;
    padding-right: 18px;
}

@media screen and (max-width: 768px) {
  #undo-button.canvas-control-button .button-inner,
#redo-button.canvas-control-button .button-inner {
    padding-left: 22px;
    padding-right: 22px;
}
}

html,body {
  overscroll-behavior: none;
}
 

@keyframes flow {
  to {
    stroke-dashoffset: -24; /* Animate by a multiple of the dash pattern total length (6+6)*2 */
  }
}

/* TODO */
/* 
body.mobile-gesture--pinching .dimensional-grid path {
  stroke: rgba(100, 100, 100, 0.7); 
  animation: flow 0.75s linear infinite; 
  stroke-width: 1px; 
  stroke-dasharray: 6 6; 
  stroke-dashoffset: 0;
}

body:not(.mobile-gesture--pinching) .dimensional-grid path {
  animation: none;
} */

/* Apply animation during desktop pan/zoom */
/* TODO - animated grid when zooming */
/* body.desktop-gesture--active .dimensional-grid path {
  stroke: rgba(100, 100, 100, 0.25); 
  animation: flow 0.75s linear infinite; 
  stroke-width: 1px;
  stroke-dasharray: 6 6;
  stroke-dashoffset: 0;
} */

/* Reset animation when not panning/zooming on desktop */
/* body:not(.desktop-gesture--active) .dimensional-grid path {
  animation: none;
} */

@media screen and (max-width: 385px) {
  #secondary-control-buttons .canvas-control .button-inner {
    padding: 5px 9px 6px;
}

#undo-button.canvas-control-button .button-inner, #redo-button.canvas-control-button .button-inner {
    padding-left: 15px;
    padding-right: 15px;
}
}




#fps-container {
  position: absolute;
  left: 10px;
  top: -30px;
  padding: 2px 5px;
  border-radius: 30px;
  background: rgb(176 176 176 / 20%);
  border: 1px dotted rgb(143 139 136 / 25%);

  color: rgb(121 121 121);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
#fps-container-icon svg * {
  fill: rgb(121 121 121);
}

#fps-container svg {
  width: 13px;
  height: auto;
  margin-right: 5px;
}

#fps-container svg * {
  fill: #666;
}

@media screen and (max-width: 768px) {
  #fps-container {
    top: unset;
    bottom: -35px; 
    left: 10px;
  }
  
}

#undo-redo-button-group {
  position: absolute;
  left: 42px;
  top: 18px;
  max-width: 130px;
  max-height: 80vh;
  z-index: 100;
  z-index: 999;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Allow clicks to pass through */
}

#undo-redo-button-group .button-inner {
  display: flex;
  transition: 0.2s ease all;
align-items: center;
justify-content: center;
background: transparent;
cursor: pointer;
border: none;
background: #ff912d;
border: 1px solid #de6c05;
font-weight: 500;
border-radius: 30px;
padding: 5px 13px 6px;
height: 29px;
font-size: 13px;
color: #000;
}

#undo-redo-button-group .button-inner {
background: rgb(176 176 176 / 50%);
border: 1px solid rgb(143 139 136 / 35%);
}

#undo-redo-button-group svg {
width: 14px;
height: auto;
margin-bottom: -1px;
}

#undo-redo-button-group .canvas-control-button.disabled {
opacity: 0.5;
cursor: not-allowed;
/* pointer-events: none; */
}
 
#undo-redo-button-group .canvas-control-button {
touch-action: manipulation;
}

#undo-redo-button-group .canvas-control button {
  width: 100%;padding: 0;margin: 0;
}

#undo-redo-button-group .info-button-group {
  display: flex;
  justify-content: stretch;
      gap: 10px;
      margin-bottom: 15px;
  }
 

 

#undo-redo-button-group  .canvas-control {
    width: 100%;
    display: flex;
    justify-content: stretch;
}



@media screen and (max-width: 768px) {
  #undo-redo-button-group{
  right: 16px;
  left: unset;
}
}
 

#undo-button.erase-mode-history-active .button-inner,
#redo-button.erase-mode-history-active .button-inner {
  background: #ffbdbd; /* Light pinkish-red background */
  border: 1px solid #FF4F4F; /* Red border */
  color: #000; /* Keep text color black or adjust if needed */
}

/* Optional: Change SVG fill color if needed */
#undo-button.erase-mode-history-active .button-inner svg *,
#redo-button.erase-mode-history-active .button-inner svg * {
  fill: #950000 !important;
}

#undo-button.drawing-mode-history-active .button-inner,
#redo-button.drawing-mode-history-active .button-inner {
  background: #e0f2ff; /* Light blue background */
  border: 1px solid #007bff; /* Blue border */
  color: #000;
}

#undo-button.drawing-mode-history-active .button-inner svg *,
#redo-button.drawing-mode-history-active .button-inner svg * {
  fill: #004c99 !important; /* Darker blue for icons */
}
 


#home-logo-link {
  display: flex !important;
}

.button-inner.bigger-icon svg {
  width: 11px;
  height: auto;
}

#primary-control-buttons.canvas-control-group {
  align-items: center;
  gap: 8px;
}

.canvas-control .button-inner {
  padding: 5px 8px 6px;
}

/* Add More Button Styles */
.canvas-control[data-control="add-more"] {
    position: relative;
}

#add-more-button .button-inner.bigger-icon {
    height: 32px;
    width: 32px;
}

/* Style for expanded menu */
#add-more-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 22px;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    z-index: 1000;
    animation: slideIn 0.3s ease forwards;
}

#add-more-menu.closing {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Rotate arrow when menu is open */
#add-more-button.menu-open svg {
    transform: rotate(180deg);
}