/* assets/css/apadd-ai-image-modal.css
   APADD AI Image Modal — floating prompt (compact + smooth) — 2026-02-26 (DEDUPED)
   Goals / Fixes:
   - Suggestions container is hidden by default (native [hidden])
   - Suggestions only appear when populated (JS removes [hidden])
   - No overlay/stacking issues (suggestions stay in normal flow)
   - Suggestions render as compact chips grid (mobile: 2 cols, tiny phones: 1 col)
   - More compact options controls
   - Adds a lightweight spinner for Pimp requests
   - Reference images panel token-aligned + full-width inside flex options tray
   - Keeps existing modal markup/classes; CSS-only changes
*/

/* ==========================================================================
   ROOT OVERLAY + TOKENS
   ========================================================================== */

.apadd-ai{
  position: fixed;
  inset: 0;
  z-index: 999998;

  display: none;
  pointer-events: none;
  font-family: inherit;

  /* Backdrop base (lighter overall; edges more transparent) */
  --apadd-ai-backdrop: color-mix(in oklch, #000 34%, transparent);

  /* Token bridge (prefer APF tokens, then CTL, then sane fallbacks) */
  --apadd-ai-c1: var(--apf-c1, var(--ctl-c1, oklch(0.78 0.21 330)));
  --apadd-ai-c2: var(--apf-c2, var(--ctl-c2, oklch(0.84 0.18 210)));
  --apadd-ai-text: var(--apf-text, var(--text-high, #e6edf7));
  --apadd-ai-muted: var(--apf-text-mid, var(--text-mid, #b8c3d4));
  --apadd-ai-s0: var(--apf-surface-0, var(--surface-0, #0a0a10));
  --apadd-ai-s1: var(--apf-surface-1, var(--surface-1, #121217));
  --apadd-ai-s2: var(--apf-surface-2, var(--surface-2, #151a22));
  --apadd-ai-border: var(--apf-border, var(--border, #ffffff1a));
  --apadd-ai-focus: var(--apf-focus, color-mix(in oklch, var(--apadd-ai-c2) 65%, transparent));
  --apadd-ai-focus-strong: var(--apf-focus-strong, color-mix(in oklch, var(--apadd-ai-c2) 85%, transparent));

  /* Geometry */
  --apadd-ai-radius: 999px;
  --apadd-ai-radius-lg: 18px;

  /* Halo */
  --apadd-ai-halo-1: color-mix(in oklch, var(--apadd-ai-c2) 34%, transparent);
  --apadd-ai-halo-2: color-mix(in oklch, var(--apadd-ai-c1) 20%, transparent);

  /* Glass */
  --apadd-ai-glass: color-mix(in oklch, var(--apadd-ai-s2) 36%, transparent);
  --apadd-ai-glass-2: color-mix(in oklch, var(--apadd-ai-s1) 30%, transparent);

  /* Motion */
  --apadd-ai-ease: cubic-bezier(.2,.9,.2,1);
  --apadd-ai-fast: 140ms;
  --apadd-ai-med: 240ms;

  /* Reference panel tokens */
  --apadd-ai-ref-surface:  color-mix(in oklch, var(--apadd-ai-s2) 44%, transparent);
  --apadd-ai-ref-surface2: color-mix(in oklch, var(--apadd-ai-s1) 34%, transparent);
  --apadd-ai-ref-border:   color-mix(in oklch, var(--apadd-ai-border) 78%, transparent);
  --apadd-ai-ref-border2:  color-mix(in oklch, var(--apadd-ai-border) 60%, transparent);
  --apadd-ai-ref-shadow:   0 16px 52px rgba(0,0,0,.22);
  --apadd-ai-ref-radius:   16px;
  --apadd-ai-ref-radius-sm: 12px;
}

/* OPEN */
.apadd-ai[data-open="1"]{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 16px;
  pointer-events: auto;
}

/* ==========================================================================
   BACKDROP
   ========================================================================== */

.apadd-ai__backdrop{
  position: absolute;
  inset: 0;

  background:
    radial-gradient(900px 620px at 50% 46%,
      color-mix(in oklch, var(--apadd-ai-c2) 28%, transparent),
      transparent 62%),
    radial-gradient(1200px 820px at 50% 48%,
      color-mix(in oklch, var(--apadd-ai-c1) 16%, transparent),
      transparent 70%),
    radial-gradient(150% 130% at 50% 50%,
      transparent 0%,
      color-mix(in oklch, #000 14%, transparent) 58%,
      transparent 84%),
    var(--apadd-ai-backdrop);

  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  transition: opacity var(--apadd-ai-med) var(--apadd-ai-ease);
}

/* ==========================================================================
   PANEL
   ========================================================================== */

.apadd-ai__panel{
  position: relative;
  width: min(820px, 100%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;

  transform: translateY(-4px);
  transition: transform var(--apadd-ai-med) var(--apadd-ai-ease);
}

/* ==========================================================================
   PROMPT BAR
   ========================================================================== */

.apadd-ai__bar{
  position: relative;
  padding: 6px 8px;

  /* IMPORTANT: vertical stack so suggestions live in normal flow */
  display: flex;
  flex-direction: column;
  align-items: stretch;

  transition:
    box-shadow var(--apadd-ai-med) var(--apadd-ai-ease),
    border-color var(--apadd-ai-med) var(--apadd-ai-ease),
    transform var(--apadd-ai-med) var(--apadd-ai-ease);
}

/* Halo bloom */
.apadd-ai__bar::before,
.apadd-ai__bar::after{
  content:"";
  position:absolute;
  inset: -18px;
  border-radius: 999px;
  pointer-events:none;
  filter: blur(18px);
  opacity: .95;
  z-index: -1;
  transition:
    opacity var(--apadd-ai-med) var(--apadd-ai-ease),
    filter var(--apadd-ai-med) var(--apadd-ai-ease);
}
.apadd-ai__bar::before{
  background: radial-gradient(closest-side, var(--apadd-ai-halo-1), transparent 70%);
}
.apadd-ai__bar::after{
  inset: -34px;
  opacity: .62;
  background: radial-gradient(closest-side, var(--apadd-ai-halo-2), transparent 74%);
}

.apadd-ai__input{
  width: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;

  color: var(--apadd-ai-text);
  font-size: 18px;
  line-height: 1.25;
  padding: 4px 10px;
  min-height: 50px;
}
.apadd-ai__input::placeholder{
  color: color-mix(in oklch, var(--apadd-ai-muted) 80%, transparent);
}

/* Focus ring on bar */
.apadd-ai__bar:focus-within{
  border-color: color-mix(in oklch, var(--apadd-ai-focus-strong) 62%, transparent);
  box-shadow:
    0 18px 62px rgba(0,0,0,.20),
    0 0 0 3px color-mix(in oklch, var(--apadd-ai-focus) 34%, transparent),
    0 0 0 1px color-mix(in oklch, var(--apadd-ai-c2) 16%, transparent) inset;
}
.apadd-ai__bar:focus-within::before{ opacity: 1; filter: blur(16px); }
.apadd-ai__bar:focus-within::after{ opacity: .70; }

/* ==========================================================================
   SUGGESTIONS
   - Hidden by default via [hidden] or legacy data-open="0"
   - Full-text buttons (no line clamp)
   - Mobile: 2 columns; tiny phones: 1 column
   ========================================================================== */

.apadd-ai__sugg[hidden],
.apadd-ai__sugg[data-open="0"]{
  display: none !important;
}

.apadd-ai__sugg{
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;

  margin: 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 78%, transparent);

  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--apadd-ai-s2) 46%, transparent),
      color-mix(in oklch, var(--apadd-ai-s1) 38%, transparent));

  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  box-shadow: 0 16px 56px rgba(0,0,0,.28);

  overflow: hidden;
}

/* subtle “slot” top divider */
.apadd-ai__sugg::before{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklch, var(--apadd-ai-c2) 26%, transparent),
    transparent);
  opacity: .9;
  pointer-events: none;
}

/* animate in when it becomes visible */
.apadd-ai__sugg:not([hidden]){
  animation: apaddSuggIn var(--apadd-ai-fast) var(--apadd-ai-ease) both;
}
@keyframes apaddSuggIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}

.apadd-ai__suggItem{
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 74%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--apadd-ai-s2) 28%, transparent),
      color-mix(in oklch, #000 10%, transparent));
  color: var(--apadd-ai-text);

  border-radius: 14px;
  padding: 10px 12px;
  min-height: 44px;

  text-align: left;
  font-size: 11px;
  line-height: 1.12;

  cursor: pointer;
  user-select: none;

  /* Full text expansion */
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: anywhere;

  transition:
    border-color var(--apadd-ai-fast) var(--apadd-ai-ease),
    box-shadow var(--apadd-ai-fast) var(--apadd-ai-ease),
    background var(--apadd-ai-fast) var(--apadd-ai-ease);
}

.apadd-ai__suggItem:hover{
  border-color: color-mix(in oklch, var(--apadd-ai-c2) 58%, transparent);
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    0 0 0 2px color-mix(in oklch, var(--apadd-ai-c2) 14%, transparent);
  transform: none; /* de-jitter on touch devices */
}
.apadd-ai__suggItem:active{
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    0 0 0 2px color-mix(in oklch, var(--apadd-ai-c2) 10%, transparent);
}

/* focus-visible for keyboard users */
.apadd-ai__suggItem:focus{ outline: none; }
.apadd-ai__suggItem:focus-visible{
  outline: 2px solid var(--apadd-ai-focus);
  outline-offset: 2px;
  border-color: color-mix(in oklch, var(--apadd-ai-c2) 70%, transparent);
}

/* selected state if JS ever adds aria-pressed or data-selected */
.apadd-ai__suggItem[aria-pressed="true"],
.apadd-ai__suggItem[data-selected="1"]{
  border-color: color-mix(in oklch, var(--apadd-ai-c2) 78%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--apadd-ai-c2) 18%, transparent),
      color-mix(in oklch, var(--apadd-ai-c1) 8%, transparent));
  box-shadow:
    0 10px 30px rgba(0,0,0,.22),
    0 0 0 1px color-mix(in oklch, var(--apadd-ai-c2) 18%, transparent) inset;
}

/* Mobile: keep suggestions in columns but tighter */
@media (max-width: 640px){
  .apadd-ai__sugg{
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .apadd-ai__suggItem{
    border-radius: 12px;
    font-size: 10.5px;
    padding: 10px 10px;
    min-height: 46px;
  }
}

/* Super-small phones: 1 column */
@media (max-width: 360px){
  .apadd-ai__sugg{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   INLINE PIMP SELECTOR
   ========================================================================== */

.apadd-ai__pimpRow{
  display: flex;
  gap: 10px;
  align-items: center;
}

.apadd-ai__pimpSelect{
  flex: 1 1 auto;
  min-width: 0;

  border-radius: 14px;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 78%, transparent);
  background: color-mix(in oklch, #000 14%, transparent);
  color: var(--apadd-ai-text);

  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.2;

  outline: none;
}
.apadd-ai__pimpSelect:focus-visible{
  outline: 2px solid var(--apadd-ai-focus);
  outline-offset: 2px;
}
.apadd-ai__pimpSelect:disabled{ opacity:.70; cursor:not-allowed; }

.apadd-ai__pimpBtn{
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 78%, transparent);
  background: color-mix(in oklch, #000 10%, transparent);
  color: var(--apadd-ai-text);

  padding: 10px 12px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;

  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition:
    transform var(--apadd-ai-fast) var(--apadd-ai-ease),
    border-color var(--apadd-ai-fast) var(--apadd-ai-ease),
    box-shadow var(--apadd-ai-fast) var(--apadd-ai-ease);
}
.apadd-ai__pimpBtn:hover{
  border-color: color-mix(in oklch, var(--apadd-ai-c2) 58%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--apadd-ai-c2) 16%, transparent);
  transform: translateY(-1px);
}
.apadd-ai__pimpBtn:active{ transform: translateY(0); }
.apadd-ai__pimpBtn:disabled{
  opacity: .70;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.apadd-ai__pimpBtn[data-apadd-use]{
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--apadd-ai-c2) 24%, transparent),
      color-mix(in oklch, var(--apadd-ai-c1) 10%, transparent));
  border-color: color-mix(in oklch, var(--apadd-ai-c2) 48%, transparent);
}

.apadd-ai__pimpHelp{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.25;
  color: color-mix(in oklch, var(--apadd-ai-muted) 92%, transparent);
  opacity: .92;
}

.apadd-ai__pimpSpin{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid color-mix(in oklch, var(--apadd-ai-text) 22%, transparent);
  border-top-color: color-mix(in oklch, var(--apadd-ai-c2) 70%, transparent);
  animation: apaddPimpSpin 850ms linear infinite;
}
@keyframes apaddPimpSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   OPTIONS TRAY (DEFAULT GRID VERSION)
   NOTE: This is the baseline “compact floating tray”. Below we override with the
         ultra-compact single-row (flex) variant for your current UI.
   ========================================================================== */

.apadd-ai__opts{
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;

  padding: 6px;
  border-radius: var(--apadd-ai-radius-lg);
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 70%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--apadd-ai-glass) 80%, transparent),
      color-mix(in oklch, var(--apadd-ai-glass-2) 78%, transparent));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 14px 56px rgba(0,0,0,.18),
    0 0 0 1px color-mix(in oklch, var(--apadd-ai-c2) 9%, transparent) inset;
}
@media (max-width: 640px){ .apadd-ai__opts{ grid-template-columns: 1fr; } }

.apadd-ai__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width: 0;
}
.apadd-ai__lbl{
  font-size: 11px;
  color: color-mix(in oklch, var(--apadd-ai-muted) 92%, transparent);
  font-weight: 850;
  letter-spacing: .02em;
  white-space: nowrap;
}
.apadd-ai__sel{
  width: 58%;
  min-width: 160px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 76%, transparent);
  background: color-mix(in oklch, #000 16%, transparent);
  color: var(--apadd-ai-text);
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  outline: none;
}
.apadd-ai__sel:focus-visible{
  outline: 2px solid var(--apadd-ai-focus);
  outline-offset: 2px;
}
@media (max-width: 640px){ .apadd-ai__sel{ width: 100%; min-width: 0; } }

.apadd-ai__toggles{
  grid-column: 1 / -1;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  justify-content:flex-start;
}
.apadd-ai__tgl{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 11px;
  color: var(--apadd-ai-text);
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 66%, transparent);
  background: color-mix(in oklch, #000 10%, transparent);
  padding: 6px 10px;
  user-select:none;
}
.apadd-ai__tgl input{ accent-color: var(--apadd-ai-c2); }
.apadd-ai__tgl em{
  font-style: normal;
  color: color-mix(in oklch, var(--apadd-ai-muted) 88%, transparent);
  margin-left: 4px;
}
.apadd-ai__tgl--disabled{ opacity: .62; }

/* ==========================================================================
   ACTIONS
   ========================================================================== */

.apadd-ai__actions{
  margin-top: 8px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px;
  align-items: stretch;
}

.apadd-ai__btn{
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;

  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 80%, transparent);
  background: color-mix(in oklch, #000 10%, transparent);
  color: var(--apadd-ai-text);

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  min-height: 46px;

  transition:
    transform var(--apadd-ai-fast) var(--apadd-ai-ease),
    border-color var(--apadd-ai-fast) var(--apadd-ai-ease),
    box-shadow var(--apadd-ai-fast) var(--apadd-ai-ease);
}

.apadd-ai__btn:hover{
  border-color: color-mix(in oklch, var(--apadd-ai-c2) 58%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--apadd-ai-c2) 18%, transparent);
  transform: translateY(-1px);
}
.apadd-ai__btn:active{ transform: translateY(0); }

.apadd-ai__btn--primary{
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--apadd-ai-c2) 42%, transparent),
      color-mix(in oklch, var(--apadd-ai-c1) 20%, transparent));
  border-color: color-mix(in oklch, var(--apadd-ai-c2) 68%, transparent);
  font-size: 16px;
  letter-spacing: .01em;
  padding: 12px 20px;
}
.apadd-ai__btn--ghost{
  background: color-mix(in oklch, #000 8%, transparent);
  font-size: 16px;
  padding: 12px 16px;
  white-space: nowrap;
}

/* ==========================================================================
   CLOSE BUTTON
   ========================================================================== */

.apadd-ai__x{
  position:absolute;
  right: 10px;
  top: -12px;

  width: 40px;
  height: 40px;
  border-radius: 999px;

  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 70%, transparent);
  background: color-mix(in oklch, #000 12%, transparent);
  color: var(--apadd-ai-text);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  line-height: 1;
  font-size: 20px;
  cursor:pointer;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  transition:
    transform var(--apadd-ai-fast) var(--apadd-ai-ease),
    border-color var(--apadd-ai-fast) var(--apadd-ai-ease),
    box-shadow var(--apadd-ai-fast) var(--apadd-ai-ease);
}
.apadd-ai__x:hover{
  border-color: color-mix(in oklch, var(--apadd-ai-c2) 58%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--apadd-ai-c2) 18%, transparent);
  transform: translateY(-1px);
}

/* ==========================================================================
   RESPONSIVE (GENERAL)
   ========================================================================== */

@media (max-width: 520px){
  .apadd-ai[data-open="1"]{ padding: 34px 12px; }
  .apadd-ai__input{ font-size: 16px; min-height: 48px; }
  .apadd-ai__panel{ transform: translateY(-2px); }

  .apadd-ai__actions{ grid-template-columns: 1fr; }
  .apadd-ai__pimpRow{ flex-wrap: wrap; }
  .apadd-ai__pimpBtn{ flex: 1 1 auto; }
}

/* ==========================================================================
   ULTRA-COMPACT SINGLE-ROW OPTIONS (CURRENT UI)
   - This overrides the baseline .apadd-ai__opts grid to flex+wrap.
   - Keep this section last among options styles.
   ========================================================================== */

.apadd-ai__panel .apadd-ai__opts{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  padding:8px 10px;
  margin-top:8px;
}

/* Each "Quality" / "Resolution" row becomes an inline cluster */
.apadd-ai__panel .apadd-ai__opts .apadd-ai__row{
  display:flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap;
}

/* Make labels compact */
.apadd-ai__panel .apadd-ai__opts .apadd-ai__lbl{
  margin:0 !important;
  padding:0 !important;
  font-size:12px;
  line-height:1;
  opacity:.9;
}

/* Compact selects */
.apadd-ai__panel .apadd-ai__opts .apadd-ai__sel{
  height:28px;
  min-height:28px;
  padding:4px 10px;
  font-size:12px;
  line-height:1;
  border-radius:10px;
}

/* Put toggles inline */
.apadd-ai__panel .apadd-ai__opts .apadd-ai__toggles{
  display:flex !important;
  align-items:center;
  gap:10px;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap;
}

/* Tight checkbox chips */
.apadd-ai__panel .apadd-ai__opts .apadd-ai__tgl{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
}

/* Keep disabled "soon" tiny */
.apadd-ai__panel .apadd-ai__opts .apadd-ai__tgl em{
  margin-left:6px;
  font-size:10px;
  opacity:.75;
}

/* Checkbox sizing */
.apadd-ai__panel .apadd-ai__opts input[type="checkbox"]{
  width:14px;
  height:14px;
}

/* Optional: on narrow widths, keep Quality+Resolution first, toggles next */
@media (max-width: 520px){
  .apadd-ai__panel .apadd-ai__opts .apadd-ai__toggles{
    flex-basis:100%;
  }
}

/* ==========================================================================
   REFERENCE IMAGES PANEL (token-aligned + full-width inside flex tray)
   ========================================================================== */

.apadd-ai .apadd-ai__refs{
  grid-column: 1 / -1;
  margin-top: 8px;

  border-radius: var(--apadd-ai-ref-radius);
  border: 1px solid var(--apadd-ai-ref-border);

  background: linear-gradient(180deg, var(--apadd-ai-ref-surface), var(--apadd-ai-ref-surface2));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);

  box-shadow: var(--apadd-ai-ref-shadow);
  overflow: hidden;
}

.apadd-ai .apadd-ai__refsHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 3px 12px;

  border-bottom: 1px solid color-mix(in oklch, var(--apadd-ai-ref-border2) 72%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--apadd-ai-c2) 10%, transparent),
    transparent 70%
  );
}

.apadd-ai .apadd-ai__refsTitle{
  display: grid;
  gap: 2px;
  min-width: 0;
}
.apadd-ai .apadd-ai__refsTitle strong{
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--apadd-ai-text);
}
.apadd-ai .apadd-ai__refsHint{
  font-size: 11px;
  color: color-mix(in oklch, var(--apadd-ai-muted) 90%, transparent);
}

.apadd-ai .apadd-ai__refBtn{
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 76%, transparent);
  background: color-mix(in oklch, #000 10%, transparent);
  color: var(--apadd-ai-text);

  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  transition:
    transform var(--apadd-ai-fast) var(--apadd-ai-ease),
    border-color var(--apadd-ai-fast) var(--apadd-ai-ease),
    box-shadow var(--apadd-ai-fast) var(--apadd-ai-ease);
}
.apadd-ai .apadd-ai__refBtn:hover{
  border-color: color-mix(in oklch, var(--apadd-ai-c2) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--apadd-ai-c2) 16%, transparent);
  transform: translateY(-1px);
}
.apadd-ai .apadd-ai__refBtn:active{ transform: translateY(0); }
.apadd-ai .apadd-ai__refBtn:focus-visible{
  outline: 2px solid var(--apadd-ai-focus);
  outline-offset: 2px;
}

.apadd-ai .apadd-ai__refList{
  display: grid;
}

.apadd-ai .apadd-ai__refEmpty{
  border-radius: var(--apadd-ai-ref-radius-sm);
  border: 1px dashed color-mix(in oklch, var(--apadd-ai-border) 58%, transparent);
  background: color-mix(in oklch, #000 8%, transparent);

  padding: 10px 12px;
  font-size: 12px;
  color: color-mix(in oklch, var(--apadd-ai-muted) 92%, transparent);

  display: flex;
  align-items: center;
  gap: 10px;
}
.apadd-ai .apadd-ai__refEmpty::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--apadd-ai-c2) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--apadd-ai-c2) 12%, transparent);
}

/* Future-proof item styling */
.apadd-ai .apadd-ai__refItem,
.apadd-ai .apadd-ai__ref,
.apadd-ai .apadd-ai__refCard{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 10px;

  padding: 8px 10px;
  border-radius: var(--apadd-ai-ref-radius-sm);
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 68%, transparent);
  background: color-mix(in oklch, #000 10%, transparent);
}

.apadd-ai .apadd-ai__refThumb,
.apadd-ai .apadd-ai__refItem img,
.apadd-ai .apadd-ai__ref img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 72%, transparent);
  background: color-mix(in oklch, #000 18%, transparent);
}

.apadd-ai .apadd-ai__refMeta,
.apadd-ai .apadd-ai__refName{
  min-width: 0;
  font-size: 12px;
  color: var(--apadd-ai-text);
}
.apadd-ai .apadd-ai__refSub,
.apadd-ai .apadd-ai__refSize{
  font-size: 11px;
  color: color-mix(in oklch, var(--apadd-ai-muted) 90%, transparent);
}

.apadd-ai .apadd-ai__refRemove,
.apadd-ai [data-ai-ref-remove]{
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 70%, transparent);
  background: color-mix(in oklch, #000 10%, transparent);
  color: var(--apadd-ai-text);

  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.apadd-ai .apadd-ai__refRemove:hover,
.apadd-ai [data-ai-ref-remove]:hover{
  border-color: color-mix(in oklch, var(--apadd-ai-c1) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--apadd-ai-c1) 14%, transparent);
}

@media (max-width: 520px){
  .apadd-ai .apadd-ai__refItem,
  .apadd-ai .apadd-ai__ref,
  .apadd-ai .apadd-ai__refCard{
    grid-template-columns: 56px 1fr auto;
  }
  .apadd-ai .apadd-ai__refThumb,
  .apadd-ai .apadd-ai__refItem img,
  .apadd-ai .apadd-ai__ref img{
    width: 56px;
    height: 56px;
  }
}

/* Full-width refs inside the flex options tray */
.apadd-ai__panel .apadd-ai__opts .apadd-ai__refs{
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
.apadd-ai__panel .apadd-ai__opts .apadd-ai__refsHead,
.apadd-ai__panel .apadd-ai__opts .apadd-ai__refList{
  width: 100% !important;
}
.apadd-ai__panel .apadd-ai__opts .apadd-ai__refsTitle{
  flex: 1 1 auto;
  min-width: 0;
}
.apadd-ai__panel .apadd-ai__opts .apadd-ai__refBtn{
  flex: 0 0 auto;
}

/* ==========================================================================
   PANEL BUSY (Pimp My Prompt)
   - Covers the panel box (layout-wise) but uses NO opaque wash.
   - Centered theme spinner + rotating quip text.
   - Enabled when: .apadd-ai__panel[data-pimp-busy="1"]
   ========================================================================== */

.apadd-ai__panel{
  position: relative; /* ensure busy layer anchors correctly */
}

.apadd-ai__panelBusy{
  position: absolute;
  inset: 0;
  z-index: 40;

  display: none;
  align-items: center;
  justify-content: center;

  pointer-events: none; /* do not block UI; JS disables the pimp button anyway */
}

.apadd-ai__panel[data-pimp-busy="1"] .apadd-ai__panelBusy{
  display: flex;
}

.apadd-ai__panelBusyInner{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;

  /* subtle pill so text remains readable (not an overlay) */
  border: 1px solid color-mix(in oklch, var(--apadd-ai-border) 72%, transparent);
  background: color-mix(in oklch, #000 14%, transparent);

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  box-shadow:
    0 18px 56px rgba(0,0,0,.20),
    0 0 0 1px color-mix(in oklch, var(--apadd-ai-c2) 10%, transparent) inset;

  color: var(--apadd-ai-text);
}

.apadd-ai__panelBusySpin{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex: 0 0 auto;

  /* premium conic spinner */
  background:
    conic-gradient(
      from 0deg,
      color-mix(in oklch, var(--apadd-ai-c2) 0%, transparent),
      color-mix(in oklch, var(--apadd-ai-c2) 82%, transparent),
      color-mix(in oklch, var(--apadd-ai-c1) 58%, transparent),
      color-mix(in oklch, var(--apadd-ai-c2) 0%, transparent)
    );
  -webkit-mask: radial-gradient(closest-side, transparent 60%, #000 62%);
          mask: radial-gradient(closest-side, transparent 60%, #000 62%);

  animation: apaddPanelBusySpin 900ms linear infinite;

  filter:
    drop-shadow(0 0 10px color-mix(in oklch, var(--apadd-ai-c2) 18%, transparent))
    drop-shadow(0 0 18px color-mix(in oklch, var(--apadd-ai-c1) 12%, transparent));
}

@keyframes apaddPanelBusySpin{
  to{ transform: rotate(360deg); }
}

.apadd-ai__panelBusyTxt{
  font-size: 12px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: .01em;

  color: color-mix(in oklch, var(--apadd-ai-text) 92%, transparent);
  max-width: min(520px, 70vw);
}

.apadd-ai__panelBusyTxt--anim{
  animation: apaddPanelBusyTxtIn 260ms var(--apadd-ai-ease) both;
}

@keyframes apaddPanelBusyTxtIn{
  from{ opacity: 0; transform: translateY(2px); }
  to  { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px){
  .apadd-ai__panelBusyInner{ padding: 9px 10px; gap: 9px; }
  .apadd-ai__panelBusyTxt{ font-size: 11px; max-width: min(440px, 78vw); }
}

/* ==========================================================================
   TOASTS
   ========================================================================== */

.apadd-ai-toast-host{
  position: fixed;
  right: max(env(safe-area-inset-right, 0px) + 14px, 14px);
  bottom: max(env(safe-area-inset-bottom, 0px) + 14px, 14px);
  z-index: 1000001;
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: none;

  --apadd-ai-toast-c1: var(--apf-c1, var(--ctl-c1, oklch(0.78 0.21 330)));
  --apadd-ai-toast-c2: var(--apf-c2, var(--ctl-c2, oklch(0.84 0.18 210)));
  --apadd-ai-toast-text: var(--apf-text, var(--text-high, #e6edf7));
  --apadd-ai-toast-muted: var(--apf-text-mid, var(--text-mid, #b8c3d4));
  --apadd-ai-toast-s1: var(--apf-surface-1, var(--surface-1, #121217));
  --apadd-ai-toast-s2: var(--apf-surface-2, var(--surface-2, #151a22));
  --apadd-ai-toast-border: var(--apf-border, var(--border, #ffffff1a));
}

.apadd-ai-toast{
  pointer-events: auto;
  width: min(420px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;

  padding: 12px 12px 12px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-toast-border) 78%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--apadd-ai-toast-s2) 84%, transparent),
      color-mix(in oklch, var(--apadd-ai-toast-s1) 94%, transparent));
  color: var(--apadd-ai-toast-text);
  box-shadow:
    0 20px 56px rgba(0,0,0,.34),
    0 0 0 1px color-mix(in oklch, var(--apadd-ai-toast-c2) 10%, transparent) inset;
  backdrop-filter: blur(14px) saturate(155%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);

  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition:
    opacity 180ms cubic-bezier(.2,.9,.2,1),
    transform 220ms cubic-bezier(.2,.9,.2,1);
}

.apadd-ai-toast[data-show="1"]{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.apadd-ai-toast[data-hide="1"]{
  opacity: 0;
  transform: translateY(8px) scale(.98);
}

.apadd-ai-toast--warn{
  box-shadow:
    0 20px 56px rgba(0,0,0,.34),
    0 0 0 1px color-mix(in oklch, var(--apadd-ai-toast-c2) 14%, transparent) inset;
}

.apadd-ai-toast--error{
  border-color: color-mix(in oklch, #ef4444 44%, var(--apadd-ai-toast-border));
  background:
    linear-gradient(180deg,
      color-mix(in oklch, #7f1d1d 42%, var(--apadd-ai-toast-s2)),
      color-mix(in oklch, #450a0a 36%, var(--apadd-ai-toast-s1)));
}

.apadd-ai-toast__body{
  min-width: 0;
}

.apadd-ai-toast__title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.apadd-ai-toast__msg{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in oklch, var(--apadd-ai-toast-muted) 94%, transparent);
}

.apadd-ai-toast__action,
.apadd-ai-toast__close{
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--apadd-ai-toast-border) 82%, transparent);
  background: color-mix(in oklch, #000 10%, transparent);
  color: var(--apadd-ai-toast-text);
  border-radius: 999px;
  min-height: 34px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 140ms cubic-bezier(.2,.9,.2,1),
    transform 140ms cubic-bezier(.2,.9,.2,1),
    box-shadow 140ms cubic-bezier(.2,.9,.2,1);
}

.apadd-ai-toast__action:hover,
.apadd-ai-toast__close:hover{
  border-color: color-mix(in oklch, var(--apadd-ai-toast-c2) 56%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--apadd-ai-toast-c2) 14%, transparent);
  transform: translateY(-1px);
}

.apadd-ai-toast__close{
  width: 34px;
  padding: 0;
  font-size: 18px;
}

@media (max-width: 520px){
  .apadd-ai-toast-host{
    left: 12px;
    right: 12px;
    justify-items: stretch;
  }

  .apadd-ai-toast{
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .apadd-ai-toast__close{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .apadd-ai-toast__action{
    grid-column: 1 / -1;
    justify-self: start;
  }
}