/* tenants/static/tenants/css/imagegen.css */



.ai-slot--active {
  border-color: #6ea8fe;
  box-shadow: 0 0 0 2px rgba(110,168,254,0.3) inset;
}


.d-none { display: none !important; }

/* lightweight modal */
.ai-modal {
  position: fixed; inset: 0;
}
.ai-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
}

.ai-modal__content {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--panel); padding: 14px; border-radius: var(--radius); max-width: 90vw; max-height: 90vh;
  display: grid; gap: 10px; justify-items: center;
}

.ai-modal__content img { max-width: 80vw; max-height: 70vh; }
.ai-msg { font-size: 0.95rem; }
.ai-msg .ok { padding: 6px 10px; border-radius: 6px; background: #e8f5e9; }
.ai-msg .err { padding: 6px 10px; border-radius: 6px; background: #fdecea; }

.spinner-border {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: .15em solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.6);
  border-radius: 50%;
  animation: ai-spin .6s linear infinite;
  vertical-align: -.2em;
  margin-left: .4em;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }


.ai-slot {
  position: relative;
  border-radius: 8px;
  overflow: hidden;            /* overlay respects the rounded frame */
  aspect-ratio: 1 / 1;         /* desktop: square tile */
  background: #fafafa;

  /* Center "+ Generate" when the tile is empty */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* <640px: make the frame a bit shorter so blocks don't feel huge */
@media (max-width: 639px) {
  .ai-slot {
    aspect-ratio: 4 / 3;       /* same width, ~25% less height */
  }
}




.ai-slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fill tile without distortion */
  display: block;
}

#ai_prompt {
  resize: vertical;
  min-height: 80px;
  max-height: 200px;

  /* Stretch prompt to the full available width */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* On small screens, give the AI prompt more height */
@media (max-width: 639px) {
  #ai_prompt {
    min-height: 140px;   /* was 80px */
    max-height: 260px;   /* allow a bit more if user resizes */
  }
}


/* Step 2: spacing around the AI prompt field */
.ai-panel .field {
  margin-top: 16px;    /* gap between tabs and "Prompt for AI" label */
  margin-bottom: 16px; /* gap between textarea and preview tiles */
}

/* Extra safety: when inside the AI tab, make sure it still spans full row */
#tab-ai #ai_prompt {
  width: 100%;
  max-width: 100%;
}

/* Make the multi-line placeholder in the AI prompt wrap correctly */
#ai_prompt::placeholder { white-space: pre-wrap; }

/* Overlay inherits the frame shape and centers the spinner */
.ai-slot .ai-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.75);
  border-radius: inherit;
}

.ai-slot .ai-loading img {
  max-width: 64px;
  max-height: 64px;
  width: auto;
  height: auto;
  opacity: .9;
}


/* Minimal tab look; safe defaults */
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-weight: 500;
}


/* "Active" tab = primary blue button */
.tab.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* Inactive tab = outlined blue button */
[data-component="image-picker"] .tab:not(.is-active) {
  background: var(--panel);
  border-color: var(--brand);
  color: var(--brand);
}



/* Radio icon spacing */
.tab .radio-icon {
  margin-right: 6px;
}

/* ===== Step 2 polish (Phase-2) ===== */

/* Tabs: full width split */
[data-component="image-picker"] [role="tablist"] {
  display: flex;
  gap: .5rem;
}

[data-component="image-picker"] [role="tablist"] .tab {
  flex: 1 1 0;
  text-align: center;
}

/* Tabs collapse below 640px (match Step 1 breakpoint) */
@media (max-width: 639px) {
    [data-component="image-picker"] [role="tablist"] {
        flex-direction: column;
    }
}




/* Drop zone for manual upload tab */
.upload-dropzone {
  margin-top: 0px;
  border-radius: 12px;
  border: 2px dashed rgba(148,163,184,1);
  padding: 24px 16px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.upload-dropzone__icon {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  background: var(--brand);
  color: #fff;
}

.upload-dropzone__title {
  font-weight: 600;
  margin-bottom: 4px;
}

.upload-dropzone__hint {
  font-size: 0.875rem;
  color: #6b7280;
}


/* Upload: drag-over highlight (uses existing upload panel) */
/* Highlight drop zone when a file is dragged over the upload panel */
#tab-upload.is-dragover .upload-dropzone {
  border-color: var(--brand);
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(37,99,235,.3);
  transform: translateY(-1px);
}

/* Add breathing space between the tabs and the frames */
.upload-row {
  display: flex;
  gap: 0.5rem;     /* match tab row gap */
  margin-top: 16px;   /* was 4px — adds visible gap */
}

/* Desktop unified height for dropzone + preview tile (≥640px) */
@media (min-width: 640px) {
  .upload-col-drop,
  .upload-col-preview {
    height: 260px;    /* same outer height for both columns */
  }

  .upload-dropzone,
  .manual-preview,
  .manual-preview-slot {
    height: 100%;     /* inner frames fill the column */
  }

  /* Make AI panel roughly match manual upload height */
  .ai-panel {
    min-height: 320px;
  }
}


.upload-col {
  display: flex;
}

.upload-col-drop {
  flex: 1 1 0;    /* same as .upload-col-preview */
}


.upload-col-drop .upload-dropzone {
  width: 100%;
  height: 100%;
}

.upload-col-preview {
  flex: 1 1 0;
  align-items: stretch;
}

.manual-preview {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.manual-preview-slot {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;     /* stop inheriting the 1/1 square from .ai-slot */
}

.manual-preview-slot .ai-slot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* show whole image, letterboxed if needed */
  background: #f9fafb;      /* same light background as tile */
}

/* Hide image until we have something */
.manual-preview-slot .ai-slot-img.d-none {
  display: none !important;
}


/* Hide unused buttons */
#tab-upload #btn-upload,
#tab-ai .js-generate-final {
  display: none !important;
}

/* Always hide the lower "Select" buttons under the AI samples */
[data-action="ai-save-selected"],
#aiSaveSelected {
  display: none !important;
}


/* Tile selection (works with your existing .ai-slot.selected/is-selected) */
.ai-slot,
.ai-tile {
  position: relative;
}
.ai-slot.is-selected,
.ai-slot.selected,
.ai-slot.ai-slot--active {
  box-shadow: 0 0 0 3px rgba(0, 117, 255, .5);
  border-radius: var(--radius);
}


/* Row of AI previews: 1 column on mobile, 3 on desktop */
.ai-slots {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;                 /* <640px: one tile per row */
  justify-items: center;                       /* center tiles horizontally */
}

@media (min-width: 640px) {
  .ai-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));  /* ≥640px: always 3 columns */
  }
}

/* Tile sizing: consistent, not huge */
.ai-tile {
  width: 100%;
  max-width: 240px;                            /* smaller cap for all screens */
}



/* Center the radio and make it bigger */
.ai-radio {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 12px;  /* extra space so it doesn’t touch the text below */
}

.ai-radio input[type="radio"] {
  transform: scale(1.8);
  width: 1.25rem;
  height: 1.25rem;
}


/* Center the "+ Peržūra" button in the empty AI slot */
#tab-ai .ai-slot.is-empty,
#tab-ai .ai-slot.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
#tab-ai .ai-slot.is-empty > * ,
#tab-ai .ai-slot.empty > *  {
  margin: 0; /* remove accidental margins that push the button */
}

/* Keep Step-2 preview link behind the image preview modal */
#step2-preview-row,
#step2-preview-url {
  position: relative;
  z-index: 1;
}

/* Modal must sit above everything else on the page */
.ai-modal,
.preview-modal,
#aiModal {
  position: fixed;    /* in case it was absolute/relative */
  z-index: 1000;
}


/* === FINAL HEIGHT SYNC: dropzone vs preview ========================= */

/* Desktop and tablets (≥640px) */
@media (min-width: 640px) {
  .upload-col-drop,
  .upload-col-preview {
    height: 260px !important;       /* outer columns equal */
  }

  .upload-dropzone,
  .manual-preview,
  .manual-preview-slot {
    height: 100% !important;        /* inner frames fill the column */
  }
}

/* Phones (<640px): stacked layout, smaller tiles, equal height */
@media (max-width: 639px) {
  .upload-row {
    flex-direction: column;
  }

  /* outer boxes equal (shorter on mobile) */
  .upload-dropzone,
  .manual-preview {
    height: 160px !important;   /* adjust to taste: 150–180 if you prefer */
  }

  /* inner slot fills wrapper */
  .manual-preview-slot {
    height: 100% !important;
  }
}

/* --- Step 2: hide per-tile "Select" buttons, use radios only --- */

/* Any AI-slot "Select" button (old or new) */
.ai-select-btn,
.ai-slot-controls .ai-select-btn,
.ai-slots .btn-select {
  display: none !important;
}