/*==============================================
  Генератор промптів для навчальних зображень
  Scoped CSS для модуля prompt-generator. Mobile-first, WordPress/Elementor safe.
================================================*/
/* Base resets for standalone mode, ignored/overridden in site wrapper */




.aio-tool-prompt-generator-wrap {
  --p-density: 1;
  --z-content: var(--z-base, 1);

  
  --space-xs:  calc(var(--p-density, 1) * var(--aio-space-2xs));
  --space-sm:  calc(var(--p-density, 1) * var(--aio-space-xs));
  --space-md:  calc(var(--p-density, 1) * var(--aio-space-md));
  --space-lg:  calc(var(--p-density, 1) * var(--aio-space-xl));
  --space-xl:  calc(var(--p-density, 1) * var(--aio-space-3xl));
  --space-2xl: calc(var(--p-density, 1) * var(--aio-space-4xl));

  
  --sidebar-px:   var(--aio-space-lg);
  --sidebar-pt:   var(--aio-space-28);
  --sidebar-pb:   var(--aio-space-md);
  --section-gap:  var(--aio-space-2xl);
  --label-gap:    var(--aio-space-sm);   
  --field-pad-y:  var(--aio-space-10);
  --field-pad-x:  var(--aio-space-sm);
  --footer-sep:   var(--aio-space-lg);


  
  --aio-tool-prompt-generator-site-header-h: var(--aio-tool-site-header-h, 0px);
  --aio-tool-prompt-generator-site-footer-h: 0px;

  display: flex;
  flex-direction: column;       /* MOBILE: stack vertically */
  width: 100%;
  /* Site typography tokens from aiosvita.com.ua */
  font-family: var(--font-primary);
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-heading);
  background: transparent;
}

/* Button transition follows shared base (var(--transition-default)). No local override needed. */

.aio-tool-prompt-generator-wrap input,
.aio-tool-prompt-generator-wrap button,
.aio-tool-prompt-generator-wrap textarea,
.aio-tool-prompt-generator-wrap select {
  font-family: inherit;
}

/* DESKTOP: side-by-side, full available height */
@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-wrap {
    flex-direction: row;
    height: calc(100dvh - var(--aio-tool-prompt-generator-site-header-h, 0px) - var(--aio-tool-prompt-generator-site-footer-h, 0px));
    overflow: hidden;
  }
}


.aio-tool-prompt-generator-sidebar {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-light);
  border-bottom: var(--border-width) solid var(--color-border);
  border-right: none;
  /* Mobile: fixed top padding for account avatar clearance; fluid sides */
  padding: var(--aio-size-button) var(--sidebar-px) var(--sidebar-pb);
  gap: var(--space-md);
  overflow: visible;
}

.aio-tool-prompt-generator-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.aio-tool-prompt-generator-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Tablet intermediate: sidebar stays stacked but with more breathing room */
@container aio-tool (min-width: 640px) {
  .aio-tool-prompt-generator-sidebar {
    padding: var(--aio-size-button) var(--sidebar-px) var(--sidebar-pb);
    gap: var(--space-lg);
  }
  .aio-tool-prompt-generator-sidebar-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    min-height: 0;
  }
}

/* Desktop: fixed-width sidebar, fluid internal spacing */
@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-sidebar {
    width: 340px;
    height: 100%;
    flex-shrink: 0;
    border-right: none; /* no T-junction with site header */
    border-bottom: none;
    padding: var(--aio-space-md) var(--sidebar-px) var(--sidebar-pb);
    align-self: stretch;
    overflow: hidden; /* sidebar itself never scrolls */
    gap: var(--footer-sep);
  }

  .aio-tool-prompt-generator-sidebar-body {
    flex: 1;
    overflow-y: auto; /* enable scroll if viewport height is too small */
    overflow-x: hidden;
    scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    min-height: 0;
  }

  /* Section 1 (textarea): grows AND can shrink below natural height */
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-textarea-section {
    flex: 1 1 auto;   /* grow + shrink, base auto prevents overflow */
    display: flex;
    flex-direction: column;
    min-height: 90px; /* keep base size, shrinkable only under explicit queries */
  }

  /* Textarea wrapper fills section */
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-textarea-section .aio-textarea-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 90px;
  }

  /* Textarea fills wrapper and shrinks with it */
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-textarea-section .aio-textarea {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: var(--aio-size-field-min) !important; /* absolute usability floor (at least 2 lines) */
    resize: none !important;     /* height managed by flex */
  }

  /* Sections 2 & 3 (stepper + palette): natural height, can shrink on tiny viewports */
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:not(:first-child) {
    flex-shrink: 0;  
    min-height: 0;
    padding-top: var(--aio-space-md);
    border-top: var(--border-width) solid var(--color-border);
  }

  .aio-tool-prompt-generator-sidebar-footer {
    flex-shrink: 0;
    padding-top: var(--footer-sep);
    border-top: var(--border-width) solid var(--color-border);
    background: transparent;
  }

  .aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-sidebar-footer {
    border-top-color: var(--color-border);
  }

  .aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:not(:first-child) {
    border-top-color: var(--color-border);
  }
}


@media (max-height: 760px) {
  @container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-sidebar {
    gap: var(--aio-space-sm);
    padding-top: var(--aio-space-sm);
    padding-bottom: var(--aio-space-sm);
  }
  .aio-tool-prompt-generator-sidebar-body { gap: var(--aio-space-md); }
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:not(:first-child) {
    padding-top: var(--aio-space-sm);
  }
  .aio-tool-prompt-generator-sidebar-footer { padding-top: var(--aio-space-sm); }
  .aio-tool-prompt-generator-stepper-num { font-size: var(--font-size-title); }
  .aio-tool-prompt-generator-palette-chip { height: var(--aio-size-icon-md); }

  }
}


@media (max-height: 600px) {
  @container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-sidebar {
    gap: var(--aio-space-xs);
    padding-top: var(--aio-space-10);
    padding-bottom: var(--aio-space-xs);
  }
  .aio-tool-prompt-generator-sidebar-body { gap: var(--aio-space-10); }
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:not(:first-child) {
    padding-top: var(--aio-space-xs);
  }
  .aio-tool-prompt-generator-sidebar-footer { padding-top: var(--aio-space-xs); }
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-textarea-section {
    min-height: 85px !important;
  }
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:first-child .aio-textarea-wrapper {
    min-height: 85px !important;
  }
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:first-child .aio-textarea-wrapper .aio-textarea {
    min-height: var(--aio-size-field-min) !important;
  }
  .aio-tool-prompt-generator-stepper-num { font-size: var(--font-size-body); }
  .aio-tool-prompt-generator-palette-chip { height: var(--aio-size-icon-xs); }
  .aio-tool-prompt-generator-label-row { margin-bottom: var(--aio-space-1xs); }

  }
}


/* Style name chip — inherits gradient border style from default sp-chip */
.aio-tool-prompt-generator .aio-history-list .aio-tool-prompt-generator-sp-chip {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  padding: var(--aio-space-3xs) var(--aio-space-xs);
  white-space: nowrap;
}

/* .aio-tool-prompt-generator-main defined in responsive section below */


.aio-tool-prompt-generator-section {
  margin-bottom: 0;
}

.aio-tool-prompt-generator-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--aio-space-3);
  margin-bottom: calc(var(--label-gap) + var(--aio-space-3));
}

@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-label-row.aio-tool-prompt-generator-align-header {
    height: var(--aio-size-icon-md); /* Точно як аватарка */
    margin-top: 0;
    /* align-items успадковує center */
    padding-bottom: 0;
  }
}


.aio-tool-prompt-generator-label {
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-heading);
  line-height: var(--line-height-label);
  margin: 0;
}

.aio-tool-prompt-generator-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-md) 0;
}


.aio-tool-prompt-generator-stepper-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-white);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--aio-space-3) var(--aio-space-2xs);
  width: 96%;          /* 4% narrower for premium feel */
  margin: 0 auto;      /* centered after width reduction */
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-out-premium), box-shadow var(--duration-fast) var(--ease-out-premium);
}

.aio-tool-prompt-generator-stepper-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-input-focus);
}

/* Stepper buttons now use global .aio-iconic-btn */

.aio-tool-prompt-generator-stepper-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--aio-space-2xs);
  user-select: none;
}

.aio-tool-prompt-generator-stepper-num {
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 1.6ch;
  text-align: center;
}

.aio-tool-prompt-generator-stepper-num.aio-tool-prompt-generator-bump {
  animation: aio-stepper-bump var(--transition-duration) var(--ease-out-premium);
}

.aio-tool-prompt-generator-stepper-max {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-body);
  opacity: var(--opacity-muted);
  align-self: flex-end;
  padding-bottom: var(--aio-space-3);
}

.aio-tool-prompt-generator-wrap .aio-textarea-wrapper {
  width: 100%;
  height: clamp(90px, 14vh, 180px);
  min-height: 90px;
  background: var(--color-white);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-input);
  transition: border-color var(--duration-fast) var(--ease-out-premium), box-shadow var(--duration-fast) var(--ease-out-premium);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.aio-tool-prompt-generator-wrap .aio-textarea-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-input-focus);
  outline: none;
}

.aio-tool-prompt-generator-wrap .aio-textarea-wrapper:has(.aio-tool-prompt-generator-error) {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 var(--aio-focus-ring-size) var(--danger-opacity);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-char-counter {
  color: color-mix(in srgb, var(--color-white) 60%, transparent) !important;
}



.aio-tool-prompt-generator-recommendation-inline {
  font-size: var(--font-size-label); /* var(--aio-space-sm): label/metadata шкала */
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  line-height: var(--line-height-caption);
  margin-left: var(--aio-space-2xs);
}



.aio-tool-prompt-generator-palette-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  cursor: pointer;
  outline: none;
  min-width: 0;
  overflow: visible; /* prevent checkmark clipping on bottom-row palettes */
}

.aio-tool-prompt-generator-palette-chip {
  height: var(--aio-size-icon-xl);
  border-radius: var(--radius);
  cursor: pointer;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-sm);
  transition: transform var(--duration-slow) var(--ease-out-premium), border-color var(--duration-slow) var(--ease-out-premium), box-shadow var(--duration-slow) var(--ease-out-premium), outline var(--duration-slow) var(--ease-out-premium), outline-offset var(--duration-slow) var(--ease-out-premium);
  position: relative; /* for .aio-tool-prompt-generator-palette-check positioning */
}

.aio-tool-prompt-generator-palette-option:hover .aio-tool-prompt-generator-palette-chip {
  transform: translateY(-3px);
  box-shadow: var(--shadow-input);
}

.aio-tool-prompt-generator-palette-option:active .aio-tool-prompt-generator-palette-chip {
  transform: translateY(0);
}

.aio-tool-prompt-generator-palette-option.aio-tool-prompt-generator-selected .aio-tool-prompt-generator-palette-chip {
  outline: var(--aio-focus-ring-size) solid var(--color-primary);
  outline-offset: -3px;
  box-shadow: var(--shadow-input-focus);
  border-color: transparent;
}


.aio-tool-prompt-generator-palette-check {
  position: absolute;
  top: calc(var(--aio-space-2xs) * -1);
  right: calc(var(--aio-space-2xs) * -1);
  width: var(--aio-space-18);
  height: var(--aio-space-18);
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-caption);
  line-height: 1;
  opacity: var(--opacity-hidden);
  transform: scale(0.5);
  transition: opacity var(--duration-slow) var(--ease-out-premium), transform var(--duration-slow) var(--ease-out-premium);
  pointer-events: none;
  z-index: var(--z-raised);
  box-shadow: 0 1px var(--aio-focus-ring-size) color-mix(in srgb, var(--color-dark) 18%, transparent);
}

.aio-tool-prompt-generator-palette-option.aio-tool-prompt-generator-selected .aio-tool-prompt-generator-palette-check {
  opacity: var(--opacity-visible);
  transform: scale(1);
}






/* Primary Gradient Buttons */











.aio-tool-prompt-generator-credits {
  text-align: center;
  font-size: var(--font-size-label); /* var(--aio-space-sm): label/metadata шкала */
  color: var(--color-body);
  margin-top: var(--aio-space-10);
}

.aio-tool-prompt-generator-credits strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.aio-tool-prompt-generator-credits.aio-tool-prompt-generator-low strong  { color: var(--color-warning); }
.aio-tool-prompt-generator-credits.aio-tool-prompt-generator-empty strong { color: var(--color-danger); }


.aio-tool-prompt-generator-main-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--aio-space-sm);
  flex-wrap: wrap;
}

@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-main-header {
    height: var(--aio-size-icon-md); 
    /* align-items: flex-end видалено, успадковується center з базового класу */
  }
}

.aio-tool .aio-tool-prompt-generator-main-title {
  font-size: var(--font-size-headline); 
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
  line-height: var(--line-height-headline);
}

.aio-tool-prompt-generator-credits-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--aio-space-1xs);
  background: var(--primary-opacity);
  color: var(--color-primary);
  border: var(--border-width) solid var(--primary-opacity);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-label); /* var(--aio-space-sm): label/metadata шкала */
  font-weight: var(--font-weight-semibold);
  padding: var(--aio-space-2xs) var(--aio-space-sm);
  margin-right: var(--aio-space-xs);
  vertical-align: middle;
  transition:
  background-color var(--transition-default),
  border-color var(--transition-default),
  color var(--transition-default);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-credits-badge {
  background: color-mix(in srgb, var(--color-white) 8%, transparent);
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-white) 15%, transparent);
}

.aio-tool-prompt-generator-credits-badge.aio-tool-prompt-generator-low {
  background: var(--warning-opacity);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.aio-tool-prompt-generator-credits-badge.aio-tool-prompt-generator-empty {
  background: var(--danger-opacity);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
}




.aio-tool-prompt-generator-style-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  cursor: pointer;
  border-radius: var(--radius);
  transition: transform var(--duration-slow) var(--ease-out-premium), color var(--duration-slow) var(--ease-out-premium), box-shadow var(--duration-slow) var(--ease-out-premium);
  width: 100%;
}

.aio-tool-prompt-generator-style-card:hover {
  transform: translateY(-3px);
}

.aio-tool-prompt-generator-style-card:active {
  transform: translateY(0);
}

.aio-tool-prompt-generator-style-card:focus-visible {
  outline: none;
}

.aio-tool-prompt-generator-style-card:focus-visible .aio-tool-prompt-generator-style-preview {
  outline: var(--aio-focus-ring-size) solid var(--color-primary);
  outline-offset: var(--aio-space-2xs);
}

.aio-tool-prompt-generator-style-preview {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  border: var(--border-width) solid var(--color-border);
  transition: box-shadow var(--duration-slow) var(--ease-out-premium), border-color var(--duration-slow) var(--ease-out-premium), outline var(--duration-slow) var(--ease-out-premium), outline-offset var(--duration-slow) var(--ease-out-premium);
}

/* Plain img inside non-carousel cards */
.aio-tool-prompt-generator-style-preview > img:not(.aio-tool-prompt-generator-sc-img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aio-tool-prompt-generator-style-card:hover .aio-tool-prompt-generator-style-preview {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-input);
}

.aio-tool-prompt-generator-style-card.aio-tool-prompt-generator-selected .aio-tool-prompt-generator-style-preview {
  border-color: var(--color-primary);
  outline: var(--aio-focus-ring-size) solid var(--color-primary);
  outline-offset: -3px;
  box-shadow: var(--shadow-input-focus);
}

/* Badge "Обрано" */
.aio-tool-prompt-generator-style-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-white) !important;
  color: var(--color-primary) !important;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-badge);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-badge);
  text-transform: uppercase;
  padding: var(--aio-space-10) var(--aio-space-lg);
  border-radius: var(--radius-pill);
  opacity: var(--opacity-hidden);
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-out-premium), transform var(--duration-fast) var(--ease-out-premium);
  pointer-events: none;
  z-index: var(--z-decor);
  box-shadow: var(--shadow-badge);
}

.aio-tool-prompt-generator-style-card.aio-tool-prompt-generator-selected .aio-tool-prompt-generator-style-badge {
  opacity: var(--opacity-visible);
  transform: translateY(0);
}

.aio-tool-prompt-generator-style-name {
  font-size: var(--font-size-body); 
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  margin-top: var(--aio-space-1xs);
  margin-bottom: 0;
  line-height: var(--line-height-headline);
  letter-spacing: 0.01em;
  transition: color var(--transition-ui);
}

.aio-tool-prompt-generator-style-card:hover .aio-tool-prompt-generator-style-name { color: var(--color-primary); }
.aio-tool-prompt-generator-style-card.aio-tool-prompt-generator-selected .aio-tool-prompt-generator-style-name { color: var(--color-primary); }



/* Layer A */
.aio-tool-prompt-generator-sc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: var(--opacity-visible);
  transition: opacity var(--duration-normal) var(--ease-out-standard);
}

/* Layer B: stacked on top, hidden by default */
.aio-tool-prompt-generator-sc-img.aio-tool-prompt-generator-sc-img--layer-b {
  position: absolute;
  inset: 0;
  opacity: var(--opacity-hidden);
  z-index: var(--z-base);
  transition: opacity var(--duration-normal) var(--ease-out-standard);
}

/* Visible state applied to both layers */
.aio-tool-prompt-generator-sc-img--in { opacity: var(--opacity-visible); }

/* Dot indicators */
.aio-tool-prompt-generator-sc-dots {
  position: absolute;
  bottom: var(--aio-space-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--aio-space-5);
  align-items: center;
  z-index: var(--z-floating);
  pointer-events: none;
}

.aio-tool-prompt-generator-sc-dot {
  width: var(--aio-space-5);
  height: var(--aio-space-5);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-white) 42%, transparent);
  transition: width var(--duration-medium-alt) var(--ease-out-standard), background var(--duration-medium-alt) ease-out;
  flex-shrink: 0;
}

.aio-tool-prompt-generator-sc-dot--active {
  width: var(--aio-space-18);
  background: color-mix(in srgb, var(--color-white) 96%, transparent);
}


.aio-tool-prompt-generator-sc-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--aio-space-3xs);
  width: 100%;
  background: var(--primary-opacity);
  overflow: hidden;
  z-index: var(--z-popover-local);
  opacity: var(--opacity-hidden);
  transition: opacity var(--duration-normal) ease-out;
}

.aio-tool-prompt-generator-style-card.aio-tool-prompt-generator-sc-playing .aio-tool-prompt-generator-sc-progress { opacity: var(--opacity-visible); }

.aio-tool-prompt-generator-sc-progress::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  transform-origin: left;
  animation: aio-sc-bar var(--duration-crossfade) linear infinite;
}









.aio-tool-prompt-generator-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--aio-space-1xs);
  background: transparent;
  color: var(--color-body);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--aio-space-5) var(--aio-space-sm) var(--aio-space-5) var(--aio-space-1xs);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  margin-bottom: var(--space-md);
  margin-left: calc(var(--aio-space-1xs) * -1); /* optical edge alignment */
  transition: color var(--duration-micro-s) ease-out, background var(--duration-micro-s) ease-out;
}

.aio-tool-prompt-generator-back-btn:hover {
  color: var(--color-primary);
  background: var(--primary-opacity);
}

.aio-tool-prompt-generator-back-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-input-focus);
}


.aio-tool-prompt-generator-screen { display: none; }
/* min-height removed: don't force empty space when content is shorter than viewport */
.aio-tool-prompt-generator-screen.aio-active {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  position: relative;
}

@container aio-tool (max-width: 899px) {
  .aio-tool-prompt-generator-screen.aio-active {
    min-height: 100dvh;
    overflow: visible;
  }

  /* Extra bottom space so sticky CTA doesn't cover content */
  #aio-tool-prompt-generator-screen-input.aio-active {
    padding-bottom: 0;
  }
}

/* Input & Results screens: column on mobile, row on desktop */
@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-screen.aio-active {
    height: calc(100dvh - var(--aio-tool-prompt-generator-site-header-h, 0px) - var(--aio-tool-prompt-generator-site-footer-h, 0px));
    min-height: 0;
    overflow: hidden;
  }
  #aio-tool-prompt-generator-screen-input.aio-active {
    flex-direction: row;
  }
  #aio-tool-prompt-generator-screen-results.aio-active {
    display: flex;
    flex-direction: row;
  }
}


.aio-tool-prompt-generator-style-zoom {
  position: absolute;
  top: var(--aio-space-xs);
  right: var(--aio-space-xs);
  width: var(--aio-size-icon-xs);
  height: var(--aio-size-icon-xs);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-dark) 65%, transparent); 
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--opacity-hidden);
  transition: opacity var(--duration-ui) var(--ease-out-premium), background var(--duration-micro-s) ease-out;
  z-index: var(--z-raised);
}

.aio-tool-prompt-generator-style-preview:hover .aio-tool-prompt-generator-style-zoom,
.aio-tool-prompt-generator-style-preview:focus-within .aio-tool-prompt-generator-style-zoom { opacity: var(--opacity-visible); }


.aio-tool-prompt-generator-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-editor-underlay);
  background: color-mix(in srgb, var(--color-dark) 88%, transparent);
  align-items: center;
  justify-content: center;
  padding: var(--aio-space-lg);
}

.aio-tool-prompt-generator-lightbox.aio-tool-prompt-generator-lightbox-open { display: flex; }

.aio-tool-prompt-generator-lightbox-inner {
  position: relative;
  width: 90vw;
  max-width: var(--aio-width-container);
  max-height: 90vh;
  display: flex;
  flex-direction: row;
  background: var(--color-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lightbox);
  animation: aio-lightbox-enter var(--transition-duration) var(--ease-out-premium) forwards;
}

.aio-tool-prompt-generator-lightbox-img-wrapper {
  flex: 6.5;
  background: var(--color-dark);
  display: flex;
  align-items: stretch;   /* allow aio-tool-prompt-generator-lb-track to fill full height */
  aspect-ratio: 16 / 9;
  position: relative;   /* needed for arrow buttons */
  overflow: hidden;
}

.aio-tool-prompt-generator-lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Transition is applied/removed by JS per-operation */
}


/* Clips the two slots so they don't overflow outside the wrapper */
.aio-tool-prompt-generator-lb-track {
  position: relative;
  flex: 1;             /* fills the flex wrapper */
  width: 100%;
  height: 100%;
  overflow: hidden;    /* critical: masks the off-screen slot during slide */
}

/* Each slot occupies the full track; nxt stacks behind by default */
.aio-tool-prompt-generator-lb-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform, opacity; 
}

.aio-tool-prompt-generator-lb-slot--cur {
  z-index: var(--z-raised);
  transform: translateX(0);
  opacity: var(--opacity-visible);
}

.aio-tool-prompt-generator-lb-slot--nxt {
  z-index: var(--z-decor);  /* nxt slides in on top */
  transform: translateX(100%);
  opacity: var(--opacity-hidden);
}

.aio-tool .aio-iconic-btn.aio-tool-prompt-generator-lightbox-arrow {
  position: absolute;
  top: 50%;
  margin-top: calc(var(--aio-space-md) * -1);
  z-index: var(--z-top-local);
  background-color: var(--color-white);
  box-shadow: var(--shadow-preview-control);
  color: var(--color-body);
}
.aio-tool-prompt-generator-lightbox-arrow--prev { left: var(--aio-space-sm); }
.aio-tool-prompt-generator-lightbox-arrow--next { right: var(--aio-space-sm); }
.aio-tool .aio-iconic-btn.aio-tool-prompt-generator-lightbox-arrow:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}


.aio-tool-prompt-generator-lightbox-dots {
  position: absolute;
  bottom: var(--aio-space-14);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--aio-space-1xs);
  align-items: center;
  z-index: var(--z-tooltip-local);
}

.aio-tool-prompt-generator-lightbox-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-white) 38%, transparent);
  cursor: pointer;
  transition: width var(--duration-medium) var(--ease-out-standard), background var(--duration-medium) ease-out;
  flex-shrink: 0;
}

.aio-tool-prompt-generator-lightbox-dot--active {
  width: var(--aio-button-sm-px);
  background: color-mix(in srgb, var(--color-white) 94%, transparent);
}

.aio-tool-prompt-generator-lightbox-dot:hover {
  background: color-mix(in srgb, var(--color-white) 68%, transparent);
}


.aio-tool-prompt-generator-lightbox-counter {
  position: absolute;
  top: var(--aio-space-14);
  left: var(--aio-space-md);
  background: color-mix(in srgb, var(--color-dark) 52%, transparent);
  color: color-mix(in srgb, var(--color-white) 88%, transparent);
  font-size: var(--font-size-label); /* var(--aio-space-sm): label/metadata — було 0.75rem, WP root=var(--aio-space-10) давав 7.5px */
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  padding: var(--aio-space-2xs) var(--aio-space-10);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid color-mix(in srgb, var(--color-white) 18%, transparent);
  pointer-events: none;
  z-index: var(--z-tooltip-local);
  display: none !important;
}

.aio-tool-prompt-generator-lightbox-content {
  flex: 3.5;
  padding: calc(var(--aio-space-xl) * 2) var(--aio-space-3xl) calc(var(--aio-space-xl) * 2) calc(var(--aio-space-3xl) + var(--aio-space-md));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--color-dark);
}

/* Increase specificity so global .aio-tool h3 doesn't override the light color on this dark panel */
.aio-tool .aio-tool-prompt-generator-lightbox-title {
  color: var(--color-white);
  font-size: clamp(var(--aio-size-icon-xs), 4.5vw, var(--aio-size-icon-md)); 
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: var(--aio-space-lg);
  text-wrap: balance;
}

.aio-tool .aio-tool-prompt-generator-lightbox-desc {
  color: var(--color-border);
  font-size: var(--font-size-body); 
  font-weight: var(--font-weight-regular);
  line-height: 1.7; /* +0.05 per impeccable rule: light-on-dark needs more leading */
  letter-spacing: 0.01em; /* +0.01em per impeccable rule: light-on-dark needs slight tracking */
  margin: 0;
  max-width: 60ch;
}

@media (max-width: 900px) {
  .aio-tool-prompt-generator-lightbox-inner {
    flex-direction: column;
    max-height: 95vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 90vw;
  }
  .aio-tool-prompt-generator-lightbox-img-wrapper {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;  /* keep 16:9 on mobile too */
  }
  .aio-tool-prompt-generator-lightbox-content {
    flex: none;
    width: 100%;
    padding: var(--aio-size-icon-sm) var(--aio-space-xl);
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .aio-tool-prompt-generator-lightbox-desc {
    max-width: 100%;
    word-break: break-word;
  }
  /* Smaller arrows on mobile */
  .aio-tool-prompt-generator-lightbox-arrow--prev { left: var(--aio-space-1xs); }
  .aio-tool-prompt-generator-lightbox-arrow--next { right: var(--aio-space-1xs); }
  .aio-tool-prompt-generator-lightbox-close {
    top: var(--aio-space-xs);
    right: var(--aio-space-xs);
  }
}

@media (max-width: 480px) {
  .aio-tool-prompt-generator-lightbox {
    padding: 0;
  }
  .aio-tool-prompt-generator-lightbox-inner {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* Lightbox close button */
.aio-tool .aio-iconic-btn.aio-tool-prompt-generator-lightbox-close {
  position: absolute;
  top: var(--aio-space-14);
  right: var(--aio-space-14);
  z-index: var(--z-top-local);
  background-color: var(--color-white);
  box-shadow: var(--shadow-preview-control);
  color: var(--color-body);
}

.aio-tool .aio-iconic-btn.aio-tool-prompt-generator-lightbox-close:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}



.aio-tool-prompt-generator-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-sidebar {
  background: var(--color-dark);
  /* border-color removed (sidebar no longer has border-right) */
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-main {
  background: var(--color-heading);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-textarea-wrapper,
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-auth-input {
  background: var(--color-heading);
  color: var(--color-white);
  border-color: var(--color-border);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-textarea-wrapper .aio-textarea {
  color: var(--color-white) !important;
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-textarea-wrapper .aio-textarea::placeholder,
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-auth-input::placeholder {
  color: color-mix(in srgb, var(--color-white) 35%, transparent);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-divider {
  background: var(--color-border);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-label,
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-char-counter,
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-credits {
  color: var(--color-border);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-palette-name {
  color: var(--color-border);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-main-title,
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-step-title {
  color: var(--color-white);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-style-name {
  color: var(--color-border);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-step {
  background: var(--color-dark);
  border-color: var(--color-border);
}

/* Done step in dark: green tint still visible against dark surface */
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-step.aio-tool-prompt-generator-done {
  background: var(--success-opacity);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-step-header:hover {
  background: color-mix(in srgb, var(--color-white) 4%, transparent);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-prompt-text {
  background: var(--color-heading);
  color: var(--color-border);
  border-color: var(--primary-opacity);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-prompt-label {
  color: var(--color-secondary);
  opacity: var(--opacity-hover-strong);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-results-title {
  color: var(--color-white);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-back-btn {
  color: color-mix(in srgb, var(--color-white) 50%, transparent);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-back-btn:hover {
  color: var(--color-primary);
  background: var(--primary-opacity);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-progress-inline {
  color: color-mix(in srgb, var(--color-white) 45%, transparent);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-copy-btn {
  color: var(--primary-opacity);
  border-color: var(--primary-opacity);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-copy-btn:hover {
  background: var(--primary-opacity);
  border-color: var(--primary-opacity);
  color: var(--color-primary);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-copy-btn.aio-tool-prompt-generator-done {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-completion-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 6%, transparent), color-mix(in srgb, var(--color-primary) 6%, transparent));
  border-color: var(--secondary-opacity);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-completion-heading {
  color: var(--color-white);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-completion-sub {
  color: color-mix(in srgb, var(--color-white) 50%, transparent);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-completion-back {
  color: color-mix(in srgb, var(--color-white) 50%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 10%, transparent);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-completion-back:hover {
  background: color-mix(in srgb, var(--color-white) 5%, transparent);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-auth-card {
  background: var(--color-dark);
  box-shadow: var(--shadow-modal);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-auth-tabs {
  border-color: var(--color-border);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-auth-tab {
  color: var(--color-border);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-summary-chip {
  background: var(--color-dark);
  border-color: var(--color-border);
  color: var(--color-border);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-auth-field label {
  color: var(--color-white);
}

.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-results-wrap {
  background: var(--color-heading);
}




.aio-tool-prompt-generator-main {
  flex: 1;
  min-width: 0;                 /* prevent flex blowout */
  padding: var(--space-lg) var(--space-md);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-main {
    /* Fixed top padding matches avatar top positioning for perfect alignment */
    padding: var(--aio-space-md) clamp(var(--aio-space-xl), 3vw, var(--aio-space-3xl)) 0 clamp(var(--aio-space-xl), 3vw, var(--aio-space-3xl));
    height: 100%;
    overflow-y: auto;        /* allow scrolling if the gallery overflows */
    scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;gap: clamp(var(--aio-space-sm), 1.5vh, var(--aio-space-lg)); 
  }
}


.aio-tool-prompt-generator-styles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--aio-space-sm), 2vh, var(--aio-space-lg)); /* fluid gap: less on short screens */
}

@container aio-tool (min-width: 640px) {
  .aio-tool-prompt-generator-styles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-styles-grid {
    display: grid;
    
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: clamp(var(--aio-space-sm), 1.6vw, var(--aio-space-lg));
    align-items: start;
    justify-content: center;
    margin-bottom: clamp(var(--aio-space-xl), 3vw, 48px); 
  }
}


@container aio-tool (min-width: 1150px) {
  .aio-tool-prompt-generator-styles-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--aio-space-14), 1.8vw, var(--aio-space-xl));
  }
}


/* In sidebar (desktop): 2 col */
/* On mobile (full width): 3 col */
.aio-tool-prompt-generator-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  padding: var(--aio-space-5) var(--aio-space-5) var(--aio-space-1xs); /* safe area for checkmark badges (-4px offset + var(--aio-space-18) badge) */
}

@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-sidebar .aio-tool-prompt-generator-palette-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (pointer: coarse) {
  .aio-tool-prompt-generator-palette-chip { height: calc(var(--aio-size-icon-xl) + var(--aio-space-3xs)); }
  
  .aio-tool-prompt-generator-auth-tab { padding: 13px; }
  .aio-tool-prompt-generator-copy-btn { padding: var(--aio-space-10) var(--aio-button-sm-px); }
  .aio-tool-prompt-generator-btn-ghost { padding: var(--aio-space-sm) var(--aio-space-xl); }
  .aio-tool-prompt-generator-stepper-btn { width: var(--aio-size-icon-xl); height: var(--aio-size-icon-xl); }
  .aio-tool-prompt-generator .aio-account-avatar { width: var(--aio-size-icon-xl); height: var(--aio-size-icon-xl); font-size: var(--font-size-body); }
  .aio-tool-prompt-generator-history-close { width: var(--aio-size-icon-xl); height: var(--aio-size-icon-xl); }
  .aio-account-menu { top: calc(100% + var(--aio-space-sm)); min-width: 220px; }
}


.aio-tool-prompt-generator-results-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
  width: 100%;
}

@container aio-tool (min-width: 640px) {
  .aio-tool-prompt-generator-results-wrap { padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
}

@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-results-wrap {
    height: calc(100vh - var(--aio-tool-prompt-generator-site-header-h, 0px) - var(--aio-tool-prompt-generator-site-footer-h, 0px));
    max-height: none;
    padding: var(--space-lg) var(--space-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* inner scroll delegated to .aio-tool-prompt-generator-steps-list */
  }
  .aio-tool-prompt-generator-steps-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;min-height: 0;
    padding-right: var(--aio-space-xs);
  }
  .aio-tool-prompt-generator-results-actions {
    margin-top: auto !important;
    padding-top: var(--space-md);
    border-top: var(--border-width) solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-white);
  }
  .aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-results-actions {
    background: var(--color-heading);
    border-top-color: var(--color-border);
  }
}

.aio-tool-prompt-generator-results-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.aio-tool-prompt-generator-results-actions 


.aio-tool-prompt-generator-results-actions 

.aio-tool-prompt-generator-results-actions 


@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .aio-tool-prompt-generator-sidebar { padding-bottom: max(var(--aio-space-xl), env(safe-area-inset-bottom)); }
  .aio-tool-prompt-generator-results-wrap { padding-bottom: max(var(--aio-size-button), env(safe-area-inset-bottom)); }
}


@media (hover: hover) and (pointer: fine) {
  .aio-tool-prompt-generator-style-card:hover { transform: translateY(-3px); }
  .aio-tool-prompt-generator-palette-chip:hover { transform: translateY(-3px); }
  
  .aio-tool-prompt-generator-btn-ghost:hover { background: var(--primary-opacity); }
  
  .aio-tool-prompt-generator-step-header:hover { background: var(--color-light); }
}



.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-recommendation-inline {
  color: var(--color-secondary);
}

/* Accessibility focus rings for interactive elements */
.aio-tool-prompt-generator-stepper-btn:focus-visible,
.aio-tool-prompt-generator-palette-chip:focus-visible,
.aio-tool-prompt-generator .aio-account-avatar:focus-visible,
.aio-tool-prompt-generator-copy-btn:focus-visible,
.aio-tool-prompt-generator-btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--shadow-input-focus);
}


@media (forced-colors: active) {
  .aio-tool-prompt-generator-stepper-btn:focus-visible,
  .aio-tool-prompt-generator-palette-option:focus-visible,
  .aio-tool-prompt-generator-style-card:focus-visible .aio-tool-prompt-generator-style-preview,
  .aio-tool-prompt-generator .aio-account-avatar:focus-visible,
  .aio-tool-prompt-generator-copy-btn:focus-visible,
  .aio-tool-prompt-generator-btn-ghost:focus-visible,
  
  .aio-tool-prompt-generator-style-card.aio-tool-prompt-generator-selected .aio-tool-prompt-generator-style-preview,
  .aio-tool-prompt-generator-palette-option.aio-tool-prompt-generator-selected .aio-tool-prompt-generator-palette-chip {
    outline: var(--aio-focus-ring-size) solid Highlight !important;
  }
}

/* Dark mode overrides for Number Stepper and Palettes */
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-stepper-wrap {
  background: color-mix(in srgb, var(--color-white) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 15%, transparent);
}
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-stepper-num {
  color: var(--color-secondary);
}
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-stepper-btn:hover {
  background: color-mix(in srgb, var(--color-white) 10%, transparent);
  color: var(--color-white);
}
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-recommendation-inline {
  color: var(--color-secondary);
}
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-palette-chip {
  background: var(--color-dark);
  border-color: color-mix(in srgb, var(--color-white) 15%, transparent);
}
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-palette-swatch {
  border-color: var(--color-dark);
}
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-palette-option.aio-tool-prompt-generator-selected .aio-tool-prompt-generator-palette-chip {
  outline-color: var(--color-secondary);
  box-shadow: 0 0 0 var(--aio-space-2xs) var(--secondary-opacity);
}
.aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-palette-check {
  background: var(--color-secondary);
}





@media (max-height: 820px) {
  @container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-wrap {
    /* Tighten the fluid tokens further via custom prop override */
    --sidebar-pt:   clamp(var(--aio-space-10), 1.4vh, var(--aio-space-18));
    --sidebar-pb:   clamp(var(--aio-space-xs),  1.2vh, var(--aio-space-md));
    --section-gap:  clamp(var(--aio-space-10), 1.6vh, var(--aio-space-18));
    --label-gap:    clamp(var(--aio-space-3xs),  0.4vh, var(--aio-space-5));
    --field-pad-y:  clamp(var(--aio-space-1xs),  0.9vh, var(--aio-space-10));
    --footer-sep:   clamp(var(--aio-space-xs),  1.0vh, var(--aio-space-14));
  }

  

  /* Palette 3-column to save vertical space */
  .aio-tool-prompt-generator-sidebar .aio-tool-prompt-generator-palette-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }

  }
}

/* Very short screens: 640px height or less (small laptop, rotated tablet) */
@media (max-height: 640px) {
  @container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-wrap {
    --sidebar-pt:  var(--aio-space-10);
    --sidebar-pb:  var(--aio-space-1xs);
    --section-gap: var(--aio-space-xs);
    --label-gap:   var(--aio-space-3xs);
    --field-pad-y: var(--aio-space-5);
    --footer-sep:  var(--aio-space-xs);
  }

  /* Stepper even more compact on very short screens */
  .aio-tool-prompt-generator-stepper-btn { width: var(--aio-space-2xl); height: var(--aio-space-2xl); }
  .aio-tool-prompt-generator-stepper-num { font-size: var(--font-size-body); }

  /* Palette chips minimal */
  .aio-tool-prompt-generator-sidebar .aio-tool-prompt-generator-palette-chip { height: var(--aio-size-icon-sm); }

  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-textarea-section {
    min-height: 90px !important;
  }
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:first-child .aio-textarea-wrapper {
    min-height: 90px !important;
  }
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:first-child .aio-textarea-wrapper .aio-textarea {
    min-height: var(--aio-size-field-min) !important;
  }

  }
}









.aio-tool-prompt-generator-sp-sidebar {
  width: 100%;
  background: var(--color-light);
  border-bottom: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

@container aio-tool (min-width: 900px) {
  .aio-tool-prompt-generator-sp-sidebar {
    width: 340px;          /* matches input-screen sidebar */
    height: 100%;
    border-bottom: none;
    border-right: var(--border-width) solid var(--color-border);
  }
}


.aio-tool-prompt-generator-sp-sidebar-header {
  flex-shrink: 0;
  padding: var(--aio-space-18) var(--aio-space-md) var(--aio-space-md);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* back button handled by global .aio-btn-white-arrow in aio-tools-base.css */


.aio-tool-prompt-generator-sp-nav-label {
  display: block;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.09em;
  color: var(--color-body);
  text-transform: uppercase;
}


.aio-tool-prompt-generator-sp-nav-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  padding: var(--aio-space-xs) var(--aio-space-md) var(--aio-space-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--aio-space-xs);
  min-height: 0;
}


.aio-tool-prompt-generator-sp-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--aio-space-sm);
  width: 100%;
  padding: var(--aio-space-10) var(--aio-space-sm);
  border-radius: var(--radius);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition:
    background-color var(--transition-default),
    border-color var(--transition-default),
    color var(--transition-default),
    transform var(--transition-default);
  font-family: inherit;
}

/* Left accent indicator */
.aio-tool-prompt-generator-sp-nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: var(--aio-focus-ring-size);
  background: var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--transition-default);
}

.aio-tool-prompt-generator-sp-nav-item:hover:not(.aio-tool-prompt-generator-sp-nav-active) {
  background: var(--primary-opacity);
}

.aio-tool-prompt-generator-sp-nav-item:focus-visible {
  outline: none;
  box-shadow: var(--shadow-input-focus);
}

.aio-tool-prompt-generator-sp-nav-active {
  background: var(--primary-opacity) !important;
}

.aio-tool-prompt-generator-sp-nav-item.aio-tool-prompt-generator-sp-nav-active::before {
  transform: scaleY(1);
}

@container aio-tool (max-width: 899px) {
  .aio-tool-prompt-generator-sp-nav-item::before {
    display: none !important;
  }
}


.aio-tool-prompt-generator-sp-badge {
  width: var(--aio-size-icon-xs);
  height: var(--aio-size-icon-xs);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  border: var(--border-width-strong) solid var(--color-border);
  background: transparent;
  color: var(--color-body);
  transition:
    background-color var(--transition-default),
    border-color var(--transition-default),
    color var(--transition-default),
    transform var(--transition-default);
}
.aio-tool-prompt-generator-sp-nav-active .aio-tool-prompt-generator-sp-badge {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.06);
}
.aio-tool-prompt-generator-sp-badge--done {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-white) !important;
}


.aio-tool-prompt-generator-sp-nav-title {
  flex: 1;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-body);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  transition:
    background-color var(--transition-default),
    border-color var(--transition-default),
    color var(--transition-default),
    transform var(--transition-default);
}
.aio-tool-prompt-generator-sp-nav-active .aio-tool-prompt-generator-sp-nav-title {
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-semibold);
}
.aio-tool-prompt-generator-sp-nav-done .aio-tool-prompt-generator-sp-nav-title {
  color: var(--color-heading);
}


.aio-tool-prompt-generator-sp-nav-done-label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: var(--opacity-hidden);
  transform: translateX(var(--aio-space-2xs));
  transition: opacity var(--transition-default), transform var(--transition-default);
}
.aio-tool-prompt-generator-sp-nav-done .aio-tool-prompt-generator-sp-nav-done-label { opacity: var(--opacity-visible); transform: translateX(0); }


.aio-tool-prompt-generator-sp-meta {
  flex-shrink: 0;
  height: var(--aio-size-icon-lg);
  box-sizing: border-box;
  padding: 0 var(--aio-space-md);
  border-top: var(--border-width) solid var(--color-border);
  display: flex;
  align-items: center;
  background: var(--color-light);
}
.aio-tool-prompt-generator-sp-meta-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aio-space-sm);
  width: 100%;
}
.aio-tool-prompt-generator-sp-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--aio-space-3) var(--aio-input-py);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  white-space: nowrap;
  
  /* Gradient border matching active palette */
  border: var(--border-width-strong) solid transparent;
  background-image: linear-gradient(var(--color-light), var(--color-light)), var(--palette-grad, linear-gradient(135deg, var(--color-secondary), var(--color-primary)));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.aio-tool-prompt-generator-sp-meta-progress {
  font-size: var(--font-size-caption);
  color: var(--color-body);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  transition: color var(--transition-default);
}
.aio-tool-prompt-generator-sp-meta-progress--done {
  color: var(--color-success);
}
.aio-tool-prompt-generator-sp-progress-track-wrap {
  width: 100%;
  height: var(--aio-space-2xs);
  background: var(--primary-opacity);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.aio-tool-prompt-generator-sp-progress-fill-bar {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  transition: width var(--transition-default);
}


.aio-tool-prompt-generator-sp-content {
  flex: 1;
  min-width: 0;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* children scroll independently */
}


.aio-tool-prompt-generator-sp-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--aio-space-md);
  padding: 0 var(--aio-size-icon-md);
  height: 48px;
  border-bottom: var(--border-width) solid var(--color-light);
  flex-shrink: 0;
}
.aio-tool-prompt-generator-sp-breadcrumb { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); color: var(--color-body); white-space: nowrap; }
.aio-tool-prompt-generator-sp-progress-wrap { display: flex; align-items: center; gap: var(--aio-space-10); }
.aio-tool-prompt-generator-sp-progress-track {
  width: 120px;
  height: var(--aio-space-2xs);
  background: var(--color-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}
.aio-tool-prompt-generator-sp-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  width: 0%;
  transition: width var(--transition-default);
}
.aio-tool-prompt-generator-sp-progress-label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-body);
  white-space: nowrap;
  transition: color var(--transition-default);
  min-width: 5ch;
  text-align: right;
}
.aio-tool-prompt-generator-sp-progress-label--done { color: var(--color-success); font-weight: var(--font-weight-bold); }



.aio-tool-prompt-generator-sp-step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* padding: var(--aio-space-18) top mirrors the vertical offset so prompt-box starts at ~68px from top,
     matching the sidebar-header bottom border. padding-bottom: var(--aio-space-3xl) aligns the bottom edge of
     prompt-box with the border-top of aio-tool-prompt-generator-sp-meta (which is exactly 40px high). */
  padding: var(--aio-space-18) var(--aio-space-3xl) var(--aio-space-3xl);
  gap: var(--aio-space-10); /* layout standard: semantic gap instead of margin-top hack */
  min-height: 0;
}


.aio-tool-prompt-generator-sp-step-header-area {
  flex-shrink: 0;
  position: relative;
  padding-bottom: 0; /* spacing is now handled via parent gap */
}


.aio-tool-prompt-generator-sp-prompt-watermark {
  position: absolute;
  bottom: var(--aio-space-2xs);
  right: var(--aio-space-xl);
  font-size: 135px;
  font-weight: 900;
  color: var(--primary-opacity);
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
  z-index: var(--z-content);
  opacity: 0.34;
  font-family: var(--font-primary);
}


.aio-tool-prompt-generator-sp-step-summary {
  font-size: var(--font-size-body-sm);
  color: var(--color-body);
  font-style: italic;
  margin: 0 0 var(--aio-space-xs);
  position: relative;
  z-index: var(--z-raised);
}


.aio-tool .aio-tool-prompt-generator-sp-step-heading {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  margin: 0;
  line-height: 1.25;
  position: relative;
  z-index: var(--z-base);
  flex: 1;
  min-width: 0;
}


.aio-tool-prompt-generator-sp-title-row {
  display: flex;
  align-items: center;
  gap: var(--aio-space-md);
  position: relative;
  z-index: var(--z-base);
  margin-bottom: 0;
}


.aio-tool-prompt-generator-sp-prompt-label {
  display: block;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  position: relative;
  z-index: var(--z-raised);
}


.aio-tool-prompt-generator-sp-prompt-box {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-light);
  border: var(--border-width) solid var(--primary-opacity);
  border-radius: var(--radius);
  margin-top: 0; /* spacing is now handled via parent gap */
  min-height: 0;
}


.aio-tool-prompt-generator-sp-prompt-scroll-area {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  padding: var(--aio-space-18) var(--aio-button-sm-px);
  min-height: 0;
  position: relative;
  z-index: var(--z-raised);
}
.aio-tool-prompt-generator-sp-prompt-scroll-area::-webkit-scrollbar {
  width: var(--aio-space-1xs);
  height: var(--aio-space-1xs);
}
.aio-tool-prompt-generator-sp-prompt-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}
.aio-tool-prompt-generator-sp-prompt-scroll-area::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius);
}
.aio-tool-prompt-generator-sp-prompt-scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}


.aio-tool-prompt-generator-sp-prompt-text {
  font-family: inherit; /* inherits Euclid Circular A from wrapper */
  font-size: var(--font-size-body); 
  line-height: var(--line-height-body); /* = var(--line-height-body) */
  color: var(--color-heading);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: var(--font-weight-regular);
}


.aio-tool-prompt-generator-sp-actions {
  flex-shrink: 0;
  padding-top: var(--aio-space-lg);
  display: flex;
  align-items: center;
  gap: var(--aio-space-sm);
}


.aio-tool-prompt-generator-sp-copy-btn {
  flex-shrink: 0;
}
.aio-tool-prompt-generator-sp-copy-done {
  background-color: var(--color-success) !important;
  background-image: linear-gradient(to right, var(--color-success), var(--color-success)) !important;
  color: var(--color-white) !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: default;
}




.aio-tool-prompt-generator-sp-completion {
  padding: 48px var(--aio-space-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--aio-space-lg);
  opacity: var(--opacity-hidden);
  transform: translateY(var(--aio-space-sm));
  transition: opacity var(--transition-default), transform var(--transition-default);
}
.aio-tool-prompt-generator-sp-completion--visible { opacity: var(--opacity-visible); transform: translateY(0); }
.aio-tool-prompt-generator-sp-completion-icon { font-size: var(--aio-size-icon-xs); color: var(--color-secondary); line-height: 1; }
.aio-tool .aio-tool-prompt-generator-sp-completion-heading { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-heading); margin: 0 0 var(--aio-space-xs); line-height: var(--line-height-headline); }
.aio-tool-prompt-generator-sp-completion-sub { font-size: var(--font-size-body-sm); color: var(--color-body); margin: 0; line-height: 1.65; max-width: 52ch; }
.aio-tool-prompt-generator-sp-completion-actions { display: flex; justify-content: center; gap: var(--aio-space-10); flex-wrap: wrap; margin-top: var(--aio-space-2xs); }


@container aio-tool (max-width: 899px) {
  .aio-tool-prompt-generator-sp-sidebar { max-height: 200px; }
  .aio-tool-prompt-generator-sp-sidebar-header { padding: var(--aio-space-10) var(--aio-space-sm) var(--aio-space-1xs); flex-direction: row; align-items: center; gap: var(--aio-space-md); }
  .aio-tool-prompt-generator-sp-nav-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    gap: var(--aio-space-2xs);
    padding: 0 var(--aio-space-sm) var(--aio-space-10);
  }
  .aio-tool-prompt-generator-sp-nav-list::-webkit-scrollbar { display: none; }
  .aio-tool-prompt-generator-sp-nav-item {
    flex-direction: column;
    min-width: var(--aio-size-button);
    max-width: 80px;
    padding: var(--aio-space-1xs) var(--aio-space-2xs);
    align-items: center;
    text-align: center;
    border-radius: var(--radius);
  }
  .aio-tool-prompt-generator-sp-nav-title {
    font-size: var(--font-size-caption);
    white-space: normal;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.4em;
  }
  .aio-tool-prompt-generator-sp-nav-done-label { display: none; }
  .aio-tool-prompt-generator-sp-meta          { display: none; }
  .aio-tool-prompt-generator-sp-step-content  { padding: var(--aio-space-md) var(--aio-space-lg) var(--aio-space-14); }
  .aio-tool-prompt-generator-sp-step-heading  { font-size: var(--font-size-body); }
  .aio-tool-prompt-generator-sp-completion    { padding: var(--aio-space-xl) var(--aio-space-lg); }
  .aio-tool-prompt-generator-sp-progress-track { width: 80px; }
  .aio-tool-prompt-generator-sp-actions       { padding-top: var(--aio-space-14); }
}

/* Large screen: cap readable content width */
@container aio-tool (min-width: 1400px) {
  .aio-tool-prompt-generator-sp-step-content {
    padding-left: clamp(var(--aio-space-3xl), 4vw, 80px);
    padding-right: clamp(var(--aio-space-3xl), 4vw, 80px);
  }
  .aio-tool-prompt-generator-sp-step-heading { max-width: 64ch; }
  .aio-tool-prompt-generator-sp-watermark { right: clamp(var(--aio-space-28), 4vw, 80px); }
}

/* Touch targets */
@media (pointer: coarse) {
  .aio-tool-prompt-generator-sp-nav-item { min-height: var(--aio-size-icon-xl); }
}



/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   LOADING OVERLAY
   Full-screen blocking state during generate().
   Sits above all content (var(--z-modal)).
   Controlled via .aio-tool-prompt-generator-loading-overlay--visible class.
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* CREDITS REFRESH BUTTON */
.aio-tool-prompt-generator-account-credits-wrapper {
  display: flex;
  align-items: center;
  gap: var(--aio-space-xs);
}
/* Refresh button uses global aio-iconic-btn now */

/* Impeccable motion: decisive rotation */
.aio-tool-prompt-generator-credits-refresh.aio-tool-prompt-generator-refreshing svg {
  animation: aio-spin var(--transition-duration) var(--ease-out-premium) forwards;
}

.aio-tool-prompt-generator-account-credits-val {
  display: inline-block;
  transform-origin: left center;
}

.aio-tool-prompt-generator-account-credits-val.aio-tool-prompt-generator-pulse {
  animation: aio-pulse-update var(--transition-duration) var(--ease-out-premium);
}





.aio-tool-prompt-generator-send-to-bg-btn {
  margin-top: var(--aio-space-lg);
}


/* === MOBILE STYLES APPENDED === */
п»ї



@container aio-tool (max-width: 899px) {

  .aio-tool-prompt-generator-wrap,
  .aio-tool-prompt-generator-screen.aio-active,
  #aio-tool-prompt-generator-screen-input.aio-active,
  #aio-tool-prompt-generator-screen-results.aio-active,
  .aio-tool-prompt-generator-main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Reserve space for sticky CTA at bottom of screen */
  #aio-tool-prompt-generator-screen-input.aio-active {
    flex-direction: column;
    padding-bottom: calc(72px + max(0px, env(safe-area-inset-bottom)));
  }

  /* -- Sidebar: no bottom border on mobile */
  .aio-tool-prompt-generator-sidebar {
    padding-top: var(--aio-space-md);   /* avatar is position:fixed so no clearance needed */
    padding-bottom: 0;
    border-bottom: none;
    order: 1;
    overflow: visible;
    gap: var(--aio-space-xs);
  }

  /* First section (textarea): add top padding to clear fixed avatar area */
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:first-child {
    padding-top: var(--aio-size-icon-xl);   /* var(--aio-space-3xl) avatar + var(--aio-space-2xs) gap */
  }

  /* Label row in first section: don't let counter overlap the avatar button */
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:first-child .aio-tool-prompt-generator-label-row {
    padding-right: var(--aio-size-touch);  /* var(--aio-space-3xl) avatar + var(--aio-space-sm) margin */
  }


  .aio-tool-prompt-generator-sidebar-body {
    gap: var(--aio-space-lg);
  }

  
  .aio-tool-prompt-generator-main {
    order: 2;
    padding: var(--aio-space-xs) var(--aio-space-xs) var(--aio-space-md);
    border-top: var(--border-width) solid var(--color-border);
    background: var(--color-white);
  }

  .aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-main {
    border-top-color: color-mix(in srgb, var(--color-white) 8%, transparent);
  }

  
  .aio-tool-prompt-generator-sidebar-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed-cta);
    background: color-mix(in srgb, var(--color-light) 94%, transparent);
    backdrop-filter: blur(var(--aio-space-sm)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--aio-space-sm)) saturate(1.6);
    border-top: var(--border-width) solid var(--color-border);
    padding: var(--aio-space-10) var(--aio-space-md) max(var(--aio-space-10), env(safe-area-inset-bottom));
    margin: 0;
    order: 3;
    gap: 0;
  }

  .aio-tool-prompt-generator-wrap[data-theme='dark'] .aio-tool-prompt-generator-sidebar-footer {
    background: color-mix(in srgb, var(--color-dark) 95%, transparent);
    border-top-color: color-mix(in srgb, var(--color-white) 8%, transparent);
  }

  #aio-tool-prompt-generator-cta-btn {
    width: 100%;
    padding: var(--aio-space-14) var(--aio-space-lg);
  }

  
  .aio-tool-prompt-generator-styles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--aio-space-10);
  }

  /* 16:9 preserves the full image without cropping */
  .aio-tool-prompt-generator-style-preview {
    aspect-ratio: 16 / 9;
  }

  .aio-tool-prompt-generator-style-name {
    font-size: var(--font-size-body-sm);
    margin-top: var(--aio-space-2xs);
  }

  .aio-tool-prompt-generator-main-header {
    margin-bottom: var(--aio-space-xs);
  }

  .aio-tool-prompt-generator-main-title {
    font-size: var(--font-size-title); 
  }

  
  .aio-tool-prompt-generator .aio-textarea-wrapper {
    height: clamp(120px, 20vh, 220px);
    min-height: 120px;
  }

  
  .aio-tool-prompt-generator-sidebar .aio-tool-prompt-generator-palette-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--aio-space-1xs);
  }

  /* Reset touch min-height override for palette chips on mobile:
     On mobile we value vertical space. 36px is enough. */
  .aio-tool-prompt-generator-palette-chip {
    min-height: var(--aio-size-icon-sm) !important;
    height: var(--aio-size-icon-sm);
  }

  .aio-tool-prompt-generator-palette-option {
    /* Tighten the option container so it doesn't force excess height */
  }

  
  .aio-tool-prompt-generator-stepper-num {
    font-size: var(--font-size-title);
  }

  /* -- 7. ACCOUNT AVATAR -- mobile: fixed top-right, doesn't overlap scrollable content */
  .aio-tool-prompt-generator .aio-account-wrap {
    position: fixed;
    top: var(--aio-space-10);
    right: var(--aio-space-sm);
    z-index: var(--z-fixed-control);  /* above sticky CTA (z-index:200) */
  }

  /* Larger avatar button -- 40px touch target */
  .aio-tool-prompt-generator .aio-account-avatar {
    width: var(--aio-size-icon-lg);
    height: var(--aio-size-icon-lg);
    font-size: var(--font-size-body); 
    font-weight: var(--font-weight-bold);
    /* Stronger shadow ring so it reads as interactive on any background */
    box-shadow:
      0 0 0 var(--border-width-thick) color-mix(in srgb, var(--color-white) 70%, transparent),
      0 var(--aio-space-3xs) var(--aio-space-10) color-mix(in srgb, var(--color-dark) 22%, transparent);
  }

  /* Dropdown opens below the fixed avatar */
  .aio-tool-prompt-generator .aio-account-wrap .aio-account-menu {
    position: fixed;
    top: calc(var(--aio-size-icon-lg) + var(--aio-space-18));
    right: var(--aio-space-sm);
    z-index: var(--z-fixed-control-menu);
  }

  
  .aio-tool-prompt-generator-sp-sidebar {
    max-height: 160px;
  }

  .aio-tool-prompt-generator-sp-sidebar-header {
    padding: var(--aio-space-xs) var(--aio-space-sm);
    gap: var(--aio-space-xs);
  }

  .aio-tool-prompt-generator-sp-nav-item {
    min-width: var(--aio-size-touch);
    max-width: 72px;
    padding: var(--aio-space-5) var(--aio-space-3);
  }

  .aio-tool-prompt-generator-sp-nav-title {
    font-size: var(--font-size-caption);
    min-height: 2.2em;
  }

  .aio-tool-prompt-generator-sp-step-content {
    padding: var(--aio-space-14) var(--aio-space-md) var(--aio-space-sm);
  }

  .aio-tool-prompt-generator-sp-step-heading {
    font-size: var(--font-size-body);
  }

  .aio-tool-prompt-generator-sp-progress-track {
    width: var(--aio-space-4xl);
  }

  .aio-tool-prompt-generator-sp-actions {
    padding-top: var(--aio-space-sm);
    gap: var(--aio-space-xs);
  }

  
  .aio-tool-prompt-generator-history-panel {
    width: 100%;
    right: -100%;
  }

  .aio-tool-prompt-generator-history-panel.aio-tool-prompt-generator-panel-open {
    right: 0;
  }

  
  .aio-tool-prompt-generator-sidebar-body,
  .aio-tool-prompt-generator-main,
  .aio-tool-prompt-generator-sp-nav-list,
  .aio-tool-prompt-generator-history-list {
    overscroll-behavior: contain;
  }
}


@container aio-tool (max-width: 380px) {

  .aio-tool-prompt-generator-sidebar {
    padding-left: var(--aio-space-14);
    padding-right: var(--aio-space-14);
  }

  .aio-tool-prompt-generator-styles-grid {
    gap: var(--aio-space-xs);
  }

  .aio-tool-prompt-generator-style-name {
    font-size: var(--font-size-label); /* var(--aio-space-sm): label/metadata шкала */
  }

  .aio-tool-prompt-generator-sp-step-content {
    padding: var(--aio-space-sm) var(--aio-space-sm) var(--aio-space-10);
  }

  .aio-tool-prompt-generator-sp-step-heading {
    font-size: var(--font-size-body-sm); 
  }

  .aio-tool-prompt-generator-stepper-btn {
    width: var(--aio-size-icon-lg);
    height: var(--aio-size-icon-lg);
  }
}


@container aio-tool (min-width: 640px) and (max-width: 899px) {

  .aio-tool-prompt-generator-styles-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--aio-space-sm);
  }

  /* Portrait tablet: 3 cols, stay 16:9 */
  .aio-tool-prompt-generator-style-preview {
    aspect-ratio: 16 / 9;
  }

  .aio-tool-prompt-generator-sidebar {
    padding-left: var(--aio-space-xl);
    padding-right: var(--aio-space-xl);
  }

  .aio-tool-prompt-generator-sp-sidebar {
    max-height: 180px;
  }
}


@media (max-height: 500px) {
  @container aio-tool (max-width: 1023px) {

  .aio-tool-prompt-generator-wrap {
    overflow: hidden;
  }

  #aio-tool-prompt-generator-screen-input.aio-active {
    flex-direction: row;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: 0;
  }

  .aio-tool-prompt-generator-sidebar {
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-bottom: none;
    border-right: var(--border-width) solid var(--color-border);
    padding: var(--aio-space-xs) var(--aio-space-sm) max(var(--aio-space-xs), env(safe-area-inset-bottom));
    order: 1;
    gap: var(--aio-space-1xs);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  .aio-tool-prompt-generator-sidebar-body {
    flex: 1;
    min-height: 0;
    gap: var(--aio-space-10);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  /* Textarea fills remaining left column height */
  .aio-tool-prompt-generator-sidebar-body > .aio-tool-prompt-generator-section:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 160px;
  }

  .aio-tool-prompt-generator .aio-textarea-wrapper {
    flex: 1;
    height: auto;
    min-height: 80px;
  }
  .aio-tool-prompt-generator .aio-textarea-wrapper .aio-textarea {
    min-height: var(--aio-size-field-min) !important;
  }

  .aio-tool-prompt-generator-stepper-num {
    font-size: var(--font-size-body);
  }

  .aio-tool-prompt-generator-stepper-btn {
    width: var(--aio-size-icon-sm);
    height: var(--aio-size-icon-sm);
  }

  .aio-tool-prompt-generator-palette-chip {
    height: var(--aio-size-icon-sm);
  }

  /* CTA: static at bottom of left column, not fixed */
  .aio-tool-prompt-generator-sidebar-footer {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: var(--border-width) solid var(--color-border);
    padding: var(--aio-space-xs) 0 0;
    flex-shrink: 0;
  }

  #aio-tool-prompt-generator-cta-btn {
    padding: var(--aio-space-10) var(--aio-space-md);
    font-size: var(--font-size-body-sm);
  }

  /* Right column: style gallery */
  .aio-tool-prompt-generator-main {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    order: 2;
    border-top: none;
    padding: var(--aio-space-xs);
  }

  .aio-tool-prompt-generator-styles-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--aio-space-1xs);
  }

  .aio-tool-prompt-generator-style-preview {
    aspect-ratio: 4 / 3;
  }

  .aio-tool-prompt-generator-style-name {
    font-size: var(--font-size-caption);
    margin-top: var(--aio-space-3);
  }

  .aio-tool-prompt-generator-main-title {
    font-size: var(--font-size-body); 
  }

  /* Results: side-by-side in landscape */
  #aio-tool-prompt-generator-screen-results.aio-active {
    flex-direction: row;
    height: 100dvh;
    overflow: hidden;
  }

  .aio-tool-prompt-generator-sp-sidebar {
    width: 200px;
    max-height: none;
    height: 100%;
    border-bottom: none;
    border-right: var(--border-width) solid var(--color-border);
  }

  .aio-tool-prompt-generator-sp-nav-list {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--aio-space-2xs) var(--aio-space-xs) var(--aio-space-xs);
  }

  .aio-tool-prompt-generator-sp-nav-item {
    flex-direction: row;
    min-width: unset;
    max-width: unset;
    text-align: left;
    align-items: center;
  }

  .aio-tool-prompt-generator-sp-nav-title {
    font-size: var(--font-size-caption);
    white-space: nowrap;
    overflow: hidden;
    display: block;
    -webkit-line-clamp: unset;
  }

  }
}


@media (pointer: coarse) {

  /* Zoom button: partially visible on touch (no hover available) */
  .aio-tool-prompt-generator-style-preview .aio-tool-prompt-generator-style-zoom {
    opacity: var(--opacity-zoom-touch);
  }

  /* On touch: palette chips at var(--aio-size-icon-md) (overriding any desktop min-height)
     Note: the @media(max-width:899px) block already sets this.
     This rule handles tablets > 899px with touch. */
  @media (min-width: 900px) {
    .aio-tool-prompt-generator-palette-chip {
      min-height: var(--aio-size-icon-xl);
    }
  }


  .aio-tool-prompt-generator-sp-nav-item {
    min-height: var(--aio-size-icon-xl);
  }

  .aio-tool-prompt-generator-sp-back {
    padding: var(--aio-space-xs) var(--aio-space-sm) var(--aio-space-xs) var(--aio-space-2xs);
    min-height: var(--aio-size-icon-xl);
  }
}


@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @container aio-tool (max-width: 899px) {
    .aio-tool-prompt-generator-sp-content {
      padding-bottom: max(var(--aio-space-14), env(safe-area-inset-bottom));
    }
  }
}

/* Production integration helpers: replace inline history layout styles. */
.aio-tool-prompt-generator-hist-tags {
  display: flex;
  align-items: center;
  gap: var(--aio-space-xs);
  flex-wrap: wrap;
}

.aio-tool-prompt-generator-hist-meta,
.aio-tool-prompt-generator-hist-date {
  margin: 0;
}


.aio-tool-prompt-generator-style-card {
  transition:
    transform var(--duration-normal) var(--ease-out-premium),
    box-shadow var(--duration-normal) var(--ease-out-premium),
    border-color var(--duration-normal) var(--ease-out-premium),
    outline var(--duration-normal) var(--ease-out-premium),
    outline-offset var(--duration-normal) var(--ease-out-premium);
  will-change: auto;
}

.aio-tool-prompt-generator-style-preview,
.aio-tool-prompt-generator-palette-chip,
.aio-tool-prompt-generator .aio-account-avatar,
.aio-tool-prompt-generator-sp-nav-item,
.aio-tool-prompt-generator-sp-copy-btn,
.aio-tool-prompt-generator-bg-banner-btn {
  transition:
    transform var(--duration-normal) var(--ease-out-premium),
    box-shadow var(--duration-normal) var(--ease-out-premium),
    border-color var(--duration-normal) var(--ease-out-premium),
    background-color var(--duration-normal) var(--ease-out-premium),
    color var(--duration-normal) var(--ease-out-premium),
    opacity var(--duration-normal) var(--ease-out-premium);
}

.aio-tool-prompt-generator-style-card:hover { transform: translateY(-3px); }

.aio-tool-prompt-generator-style-card:active { transform: translateY(0); }

.aio-tool-prompt-generator-palette-option:hover .aio-tool-prompt-generator-palette-chip,
.aio-tool-prompt-generator-palette-chip:hover {
  transform: translateY(-3px);
}




.aio-tool-prompt-generator .aio-button:active:not(:disabled),
.aio-tool-prompt-generator .aio-iconic-btn:active:not(:disabled) {
  transition-duration: var(--duration-fast);
  transform: translateY(-1px) scale(0.98);
}

.aio-tool-prompt-generator-lightbox-arrow,
.aio-tool-prompt-generator-counter-btn,
.aio-tool-prompt-generator-bg-banner-btn,
.aio-tool-prompt-generator-sc-dot,
.aio-tool-prompt-generator-auth-tab {
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-out-premium);
}