@media (prefers-color-scheme: dark) {
  :root {
    --text-1: #000000;
    --text-2: #9ca3af;
    --surface-1: #ececec;
    --surface-2: #fbfbfb;
    --border-1: #cdcbcb;
    --brand-1: #60a5fa;
    --brand-2: #3b82f6;
    --shadow-ctl: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.5);
  }
}
    .menu-wrap-off
{
display: none !important;    
}
html.wp-dark-mode-active #page #swai-trending-list .trend-pill.selected, html.wp-dark-mode-active .genre-option.selected
{
  border: 2px solid #fbfbfb !important;
  border-color: white !important;
  filter: invert(0.2);
}
#swai-trending-list .trend-pill.selected{
    border: 2px solid black !important;
}

#swai-genre-search, #swai-theme
{
    margin-top: 15px;
}
#swai-busy .center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#swai-busy .swai-busy-cancel:hover
{
  opacity:1;
}
#swai-busy:not(.pageLoaded)
{
    display:none !important;
}
#swai-busy .swai-busy-cancel {
  margin-top: 10px;
  font-size: 20px;
  background: #004344;
  color: #fbfbfb;
  border: 2px solid #fbfbfb;
  cursor: pointer;
  padding: 10px 30px;
  border-radius: 15px;
  transition:0.3s;
  opacity: 0.5;
}

/* Buttons inside the recommendations popup */
.swai-popup .popup-actions {
  display: flex;
  justify-content: space-around;
  gap: 8px;              /* space between the two buttons */
  margin-top: 30px;
}

/* "Get Ideas From AI" button look */
.swai-popup .swai-popup-more {
  background: #fbfbfb !important;
  color: #013f40 !important;
  border: 1px solid #013f40 !important;
}

.swai-block { margin: 12px 0; }
.swai-block-h { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.swai-copy { padding:6px 10px; }

#swai-form { max-width: 90vw; margin: 0 auto; color: var(--text-1); }
.swai-stage { background: var(--surface-1); border:1px solid var(--border-1); padding:16px; border-radius:var(--radius-ctl); box-shadow: var(--shadow-ctl); }
.swai-row { margin-bottom:14px; }
label .req { color:#b91c1c; }
.swai-actions { margin-top:10px; display:flex; gap:8px; }
.swai-btn { padding:8px 12px; border:1px solid var(--border-1); background:var(--surface-1); cursor:pointer; border-radius:6px; }
.swai-btn.primary { background:var(--brand-1); color:#fbfbfb; border-color:var(--brand-2); }
.swai-topbar { display:flex; justify-content:space-between; margin-bottom:8px; align-items: center; }
.swai-disabled { background:#fff3cd; border:1px solid #ffeeba; padding:12px; border-radius:6px; }
.swai-output h3 { margin: 14px 0 6px; }
.swai-output pre { white-space:pre-wrap; background:var(--surface-2); padding:10px; border-radius:6px; border:1px solid var(--border-1); }

/* Genres */
.swai-genre-selected { margin: .5rem 0 .25rem; }
.swai-genre-selected .chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .5rem; margin:0 .25rem .25rem 0;
  border:1px solid #cbd5e1; border-radius:18px; font-size:12px;
  background:#eef2ff; cursor:pointer;
}
.swai-genre-list {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:.35rem;
  max-height: 320px;
  overflow:auto;
  border:1px solid var(--border-1);
  padding:.5rem;
  border-radius:8px;
  background:var(--surface-1);
}
.genre-option { display:inline-block; width:100%; text-align:left; padding:.48rem .6rem; border:1px solid #d1d5db; border-radius:8px; background:var(--surface-1); font-size:13px; cursor:pointer; }
.genre-option:hover { border-color:var(--brand-1); }
.genre-option.selected { background:#eef2ff; border-color:var(--brand-1); }
.genre-option.disabled { opacity:.5; cursor:not-allowed; }

/* Tags, fields (stage 2) */
.swai-field { border:1px solid var(--border-1); border-radius:6px; padding:10px; margin-bottom:10px; background:var(--surface-2); }
.swai-field .hdr { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.swai-field .tips { width:22px; height:22px; border:1px solid var(--border-1); border-radius:50%; text-align:center; line-height:20px; cursor:help; background:var(--surface-1); }
.swai-inputbox { display:flex; gap:8px; margin:8px 0; }
.swai-inputbox input.swai-free { flex:1; }
.swai-tags { display:flex; flex-wrap:wrap; gap:6px; min-height:28px; }
.swai-tag { display:inline-flex; align-items:center; gap:6px; padding:4px 6px; border:1px solid #c7d2fe; background:#eef2ff; border-radius:16px; }
.swai-tag .txt { outline:none; min-width:30px; }
.swai-tag-mv, .swai-tag-del { border:none; background:transparent; cursor:pointer; }

/* Popup for recommendations */
.swai-popup { position:fixed; inset:0; background:rgba(0,0,0,.3); display:none; align-items:center; justify-content:center; }
.swai-popup .inner { background:var(--surface-1); width:640px; max-width:95vw; border-radius:8px; padding:16px; border:1px solid var(--border-1); box-shadow: var(--shadow-ctl); }
.swai-popup .recs {display:flex;flex-wrap:wrap;gap: 10px;margin:8px 0;}
/* Selected recommendation tag inside popup */
.swai-popup .tag.is-selected {
  border: 2px solid #4b5563;      /* dark gray */
  background: #f3f4f6;
}

/* "Get Ideas From AI" pulse when clicked */
.swai-popup .swai-popup-more.pulse-border {
  border-width: 4px !important;
  border-color: #4b5563 !important;
}

/* Drag & drop state for chosen tags in fields */
#swai-form .swai-tag {
  cursor: grab;
}
#swai-form .swai-tag.dragging {
  opacity: 0.8;
  cursor: grabbing;
}

.swai-popup .tag {border:2px solid var(--border-1);padding:4px 8px;background:var(--surface-2);cursor:pointer;font-size: 16px;border-radius:4px;}
.swai-row:has(.swai-genre-selected){
    margin: 30px auto 30px auto;
}
.swai-row:has(.swai-genre-selected) label, .swai-row:has(#swai-theme) label
{
    font-weight: 700;
    font-family: sans-serif;
    font-size: 18px;
    color: black;
}
/* Trending pills */
.swai-trending .label {color:var(--text-2);margin: 30px auto 0px auto;}
#swai-trending-list .trend-pill {
    justify-content: center;
  display:inline-block; padding:.35rem .6rem; margin:.25rem .35rem .35rem 0;
  border:1px solid var(--border-1); border-radius:16px; font-size:12px; background:var(--surface-2); cursor:pointer;
}
#swai-trending-list .trend-pill:hover { border-color:var(--brand-1); }
/* === SingWithAI – BotWithBars skin (append-only) ===================== */
/* Theme integration: brand color from WP theme or fallback to #004040. */
#swai-form{
  --swai-brand: #004040;                 /* fallback; JS will overwrite from theme */
  --swai-ink: #0e0f10;
  --swai-bg: #fafafa;
  --swai-muted: #f4f7f8;
  --swai-border: rgba(10, 16, 24, .14);
  --swai-ring: rgba(0,64,64,.28);
  --swai-shadow-1: 0 14px 34px rgba(0,0,0,.12);
  --swai-shadow-2: 0 22px 52px rgba(0,0,0,.22);
  --swai-radius: 14px;
  --swai-radius-lg: 18px;

  /* Global rhythm & scale: bigger text except headings */
  font-size: 1.06rem;
  color: var(--swai-ink);
}

/* Headings slightly smaller than before, body UI larger */
#swai-form h2, #swai-form h3{
  line-height: 1.2;
  margin: 0 0 12px;
}
#swai-form h2{ font-size: clamp(1.35rem, 1.5vw + 1rem, 1.75rem); }
#swai-form h3{ font-size: clamp(1.12rem, 0.6vw + 0.9rem, 1.35rem); }

/* Center the form, match site canvas */
#swai{ display: grid; place-items: start center; }
#swai-form{margin: 0 auto;}

/* Inputs/selects/textarea larger with modern visuals */
#swai-form input.swai-input,
#swai-form .swai-input,
#swai-form select,
#swai-form textarea{
  font-size:1.06rem;
  padding:12px 14px;
  border-radius: var(--swai-radius);
  border:1px solid var(--swai-border);
  background: #fbf8f8;
  color:var(--swai-ink);
  transition: box-shadow .25s ease, border-color .2s ease, transform .15s ease;
}
#swai-form select{
  appearance: none; -webkit-appearance:none; -moz-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23004040' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 12px center; padding-right:42px;
}
#swai-form input:focus, #swai-form select:focus, #swai-form textarea:focus{
  outline: none;
  border-color: var(--swai-brand);
  box-shadow: 0 0 0 4px var(--swai-ring);
}

/* Buttons – brand color, no gradients */
#swai-form .swai-btn{
  background: var(--swai-brand); color:#fbfbfb; border:0; border-radius: var(--swai-radius);
  padding:12px 16px; font-weight:800; font-size:1.02rem; letter-spacing:.15px;
  box-shadow:0 10px 24px rgba(0,64,64,.18);
  transition: transform .12s ease, filter .25s ease, box-shadow .25s ease;
}
#swai-form .swai-btn:hover{ filter:brightness(1.06); box-shadow:0 18px 44px rgba(0,64,64,.28); }
#swai-form .swai-btn:active{ transform:translateY(1px); }

/* Explore buttons distinct (outline) */
#swai-form .swai-recs-btn{
  background:#fbfbfb; color:var(--swai-brand); border:1.8px solid var(--swai-brand);
  border-radius: var(--swai-radius); padding:10px 12px; font-weight:800;
  transition: box-shadow .22s, transform .08s, background .2s;
}
#swai-form .swai-recs-btn:hover{
  background:rgba(0,64,64,.08); box-shadow:0 0 0 4px var(--swai-ring); transform:translateY(-1px);
}

/* Stage‑1 toolbar: Mode | Model | Next in one row (desktop), stacked on mobile */
#swai-stage1 .stage1-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; align-items:flex-end;
}
#swai-stage1 .stage1-toolbar > *{ flex:1 0 100%; } /* mobile default: full width */
@media (min-width: 980px){
  #swai-stage1 .stage1-toolbar{ flex-wrap:nowrap; }
  #swai-stage1 .stage1-toolbar > *{ flex:0 0 calc(33.333% - 8px); min-width:0; }
}
#swai-stage1 .stage1-toolbar .swai-btn{ width:100%; }

/* On Stage‑2, Back & Generate take full width */
#swai-stage2 .swai-actions .swai-btn{ width:100%; margin-top:8px; }

/* Stage‑2 fields: two per row on desktop */
#swai-fields-wrap{
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width: 1024px){
  #swai-fields-wrap{ grid-template-columns:1fr 1fr; }
}

/* Field card hover */
#swai-form .swai-field{
  background: var(--swai-bg); border:1px solid var(--swai-border); border-radius: var(--swai-radius-lg);
  padding:16px; transition: box-shadow .25s ease, transform .20s ease, border-color .2s ease;
}
#swai-form .swai-field:hover{box-shadow: var(--swai-shadow-1);border-color: var(--swai-brand);}

/* Header: put tooltip next to label; Explore aligned at right */
#swai-form .swai-field .hdr{
  display:grid !important; grid-template-columns:auto auto 1fr; align-items:center; gap:10px;
}
#swai-form .swai-field .hdr .swai-recs-btn{ justify-self:end; }

/* Tooltip icon (use only .tips; we’ll merge any .swai-help via JS) */
#swai-form .swai-field .tips{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px;
  border:1.6px solid var(--swai-brand); color:var(--swai-brand); background:#fbfbfb;
  font-weight:900; cursor:help; user-select:none; margin-left:6px;
  transition: background .2s, box-shadow .2s, transform .1s;
}
#swai-form .swai-field .tips:hover{ background:rgba(0,64,64,.08); box-shadow:0 0 0 3px var(--swai-ring); transform:translateY(-1px); }

/* If Tippy CDN loads, style the balloon */
.tippy-box[data-theme~="swai"]{
  background:#0e1717; color:#eaf4f4; font-size:.96rem; letter-spacing:.1px;
  border:1px solid rgba(255,255,255,.16); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.tippy-box[data-theme~="swai"] .tippy-arrow{ color:#0e1717; }

/* Popup: fixed center; no overflow beyond viewport; smooth fade */
#swai-form .swai-popup{
  position:fixed; inset:0; z-index:100000; display:none;
  background:rgba(0,0,0,.42); backdrop-filter: blur(5px);
}
#swai-form .swai-popup .inner{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: min(70vw,94vw);
  max-height:min(86vh,92dvh);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#fbfbfb;
  border:1px solid var(--swai-border);
  border-radius: var(--swai-radius-lg);
  padding:16px;
  box-shadow: var(--swai-shadow-2);
  opacity:0;
  transition: opacity .30s ease;
}
#swai-form .swai-popup[style*="display: block"] .inner,
#swai-form .swai-popup.open .inner{ opacity:1; }

/* Tags (chips) */
#swai-form .swai-tag{
  background:#0c2727;
  color:#e7ffff;
  border:1px solid #1e6262;
  border-radius: 20px;
  padding:8px 12px;
  font-weight:700;
  letter-spacing:.1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
}
#swai-form .swai-tag:hover{ transform:translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.14); }

/* Trending ideas: grid + hover grow */
#swai-trending-list{display:grid;grid-template-columns: repeat(auto-fit, minmax(100%,1fr));gap:12px;margin-top:10px;max-height: 400px;overflow-x: auto;}
#swai-trending-list .trend-pill{
    text-align: center;
  display:flex; align-items:center; gap:10px; padding:12px 14px; font-size:1rem; font-weight:800;
  border-radius:14px; border:1px solid var(--swai-border); background: var(--swai-muted); cursor:pointer;
  transition: transform .18s, box-shadow .25s, border-color .18s, background .18s;
}
#swai-trending-list .trend-pill:hover{border-color:var(--swai-brand);box-shadow:0 14px 28px rgba(0,0,0,.12);}

/* Genres (generic chips – improves hover) */
#swai-genres .chip, #swai-genres .genre, #swai-genres .genre-pill{
  display:inline-flex; align-items:center; padding:10px 12px; margin:6px; border-radius:999px;
  border:1px solid var(--swai-border); background:#fbfbfb; cursor:pointer;
  transition: transform .18s, box-shadow .22s, border-color .18s;
}
#swai-genres .chip:hover, #swai-genres .genre:hover, #swai-genres .genre-pill:hover{
  transform: translateY(-1px); border-color: var(--swai-brand); box-shadow:0 12px 26px rgba(0,0,0,.12);
}

/* Steps indicator – compact & centered */
#swai-steps{ display:flex; justify-content:center; gap:10px; margin:6px 0 14px; }
#swai-steps .step{
  padding:8px 12px; border-radius:999px; border:1px solid var(--swai-border); background:#fbfbfb; font-weight:800; font-size:.95rem;
  transition: background .25s, border-color .25s, color .25s;
}
#swai-steps .step.is-active{ background: var(--swai-brand); color:#fbfbfb; border-color: var(--swai-brand); }

/* Output: hidden until content present; preserve newlines; add margin */
#swai-output{margin-top:18px; }
#swai-output.show{ display:block; }
#swai-output, #swai-output pre{ white-space:pre-wrap; }
#swai-busy img{ width:min(360px, 60vw); height:auto; }
#swai-busy .text{ color:#fbfbfb; font-weight:900; letter-spacing:.2px; font-size:1.06rem; }

/* Loading overlay (underlay) – uses your GIF path; fades up to 0.5s */
#swai-busy{
  position:fixed; inset:0; z-index:100005; display:none ;
  background: rgba(0,0,0,.6);
  opacity:0; transition: opacity .35s ease;
}
#swai-busy.show{ display:block; opacity:1; }
#swai-busy .center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; gap:14px;
}
#swai-busy img{ width:min(280px, 48vw); height:auto; }

/* Scrollbars match theme */
#swai-form *{scrollbar-width:thin;scrollbar-color: var(--swai-brand) rgba(0, 0, 0, .06);}
#swai-form *::-webkit-scrollbar{ height:12px; width:12px; }
#swai-form *::-webkit-scrollbar-thumb{ background: var(--swai-brand); border-radius:20px; }
#swai-form *::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); }


/* Tooltip bubble (no external libs) */
#swai-tip{
  position:fixed; z-index:100002; display:none;
  max-width:min(86vw,520px);
  background:#0f1115; color:#e9f0f0; font-size:.98rem;
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 12px;
  box-shadow:0 18px 42px rgba(0,0,0,.38);
  opacity:0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
#swai-tip.show{ display:block; opacity:1; transform: translateY(0); }
#swai-tip .b{ line-height:1.4; }



@media (max-width: 768px){
    .eel-site-logo a img
    {
        width: 75px !important;
    }
#swai-trending-list
  {
    display: flex;
    flex-direction: column;
    max-height: 200px;
    overflow: auto;
  }
  #swai-trending-list button
  {
  font-size: 13px !important;
  }
  #page header
  {
    top: 0 !important;
  }
  header .e-con.e-flex>.e-con-inner
  {
    padding: 10px 0px 0px 0px;
  }
  #swai-next
  {
    width:100%;
  }
  .swai-row:has(select),.swai-actions:has(#swai-next)
  {

  }
  .swai-row:has(select) label
  {
  min-width: 80px;
  }
  .swai-row:has(select)
  {
      padding: 0;
      display: flex;
      gap: 5px;
      justify-content: center;
      align-items: center;
  }
  #swai-genre-list
  {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    max-height: 200px;
    overflow: scroll;
  }
      .swai-tag button
    {

        color:white;font-size:18px;
    }
   .swai-tag span.txt
  {
    font-size:16px !important;
    flex: 1 1 auto;    /* or: flex: 1; */
  }
  .swai-tag .swai-tag-mv:nth-child(2)
  {
    transform: rotate(90deg);
  }
  .swai-tag .swai-tag-mv:nth-child(3)
  {
    transform: rotate(90deg);
  }
  #swai-form .swai-tag
  {
    width: 100%;
  }
  #swai-refresh
  {
    font-size: 14px !important;
    background: #000000 !important;
    margin-left: 20px;
    max-width: 35vw;
    min-width: 150px;
  }
}
    html.wp-dark-mode-active #page .swai-popup .tag.is-selected
    {
     filter: invert(0.2);
    }

@media (min-width: 768px)
  {
    .swai-tags
    {
      max-height: 300px !important;
      overflow-y: auto;
    }
       .swai-tag span.txt
  {
    font-size:16px !important;
    flex: 1 1 auto;    /* or: flex: 1; */
  }
      #swai-form .swai-tag
  {
    width: 100%;
  }
          .swai-tag button
    {

        color:white;font-size:18px;
    }
      .swai-tag .swai-tag-mv:nth-child(2)
  {
    transform: rotate(90deg);
  }
  .swai-tag .swai-tag-mv:nth-child(3)
  {
    transform: rotate(90deg);
  }
      .swai-tag button:hover
    {
      transform:scale(1.5);
      
    }

    .swai-actions #swai-next
    {
       width: 100%;
      display: inline-block;
    }
    

    
    .swai-row:has(select), .swai-actions:has(#swai-next)
    {
      width: 31%;
      margin:0 1%;
      display: inline-block;
      padding-bottom: 15px;
    }
    
    #swai-genre-list
  {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    max-height: 200px;
    overflow-y: scroll;
  }
  }