/* =========================================
   /styles/entries-tabs/entries-tabs.css
   ✅ Results tab NEVER expands the card (scrolls inside)
   ✅ Entries + Results fill the available card height
   ✅ Less round edges ONLY inside the tabs UI (doesn't affect global buttons)
   ✅ Works even if base.css has flex/height rules
   ========================================= */

/* ---------- Theme tokens (DEFAULT = DARK) ---------- */
:root{
  /* Tabs row */
  --etabs-border: rgba(148, 163, 184, 0.18);

  /* Tab text */
  --etab-text: rgba(226, 232, 240, 0.65);
  --etab-hover-text: rgba(248, 250, 252, 0.92);
  --etab-active-text: #f9fafb;
  /* Count badge */
  --etab-count-bg: rgba(148, 163, 184, 0.16);
  --etab-count-border: rgba(148, 163, 184, 0.22);
  --etab-count-text: rgba(248, 250, 252, 0.92);

  /* Underline */
  --etab-underline-h: 2px;
    /* Tab hover / press feedback (premium) */
  --etab-hover-bg: rgba(148, 163, 184, 0.12); /* light grey */
  --etab-press-bg: rgba(148, 163, 184, 0.22); /* darker, momentary */
  --etab-focus-ring: rgba(148, 163, 184, 0.28);

    /* Premium tabs typography + spacing */
   --etab-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;


  --etab-font-weight: 500;     /* not bold */
    --etab-font-size: 0.95rem;        /* ✅ CONTROL THIS (Entries/Results size) */
  --etab-font-size-desktop: 1.15rem;/* optional: desktop size */

  --etabs-gap: 12px;           /* tighter gap between tabs */
  --etabs-pad-left: 0px;       /* less left gap */
  --etabs-pad-top: 0px;        /* keep them at the top */
  --etabs-pad-bottom: 8px;
  /* Segmented tabs sizing */
  --etabs-h: 40px;          /* height of the whole tabs bar */
  --etab-pad-x: 14px;       /* left/right padding inside each tab segment */
  --etab-divider: rgba(148, 163, 184, 0.14); /* line between tabs */


  /* Results */
  --results-title: rgba(248, 250, 252, 0.92);
  --results-empty: rgba(148, 163, 184, 0.65);

  --results-item-bg: #0b1220;
  --results-item-border: rgba(148, 163, 184, 0.18);
  --results-item-text: #f9fafb;
  --results-item-meta: rgba(148, 163, 184, 0.75);

  --results-scroll-thumb: rgba(148,163,184,.35);

  /* Less rounding inside the tabs UI */
    --etabs-radius-sm: 5px;


  /* ✅ Hard caps used ONLY when Results tab is open (via .inputs-card.is-results) */
  --results-card-cap: max(420px, calc(100svh - 220px));
  --results-card-cap-desktop: max(520px, calc(100svh - 160px));

  /* Minimum usable height for textarea on small screens */
  --entries-min-h: 260px;
    /* Tools row (under tabs) */
  --etool-bg: #2563eb;
  --etool-hover: #1d4ed8;
  --etool-press: #1e40af;
  --etool-text: #ffffff;

  --etool-h: 32px;       /* smaller */
  --etool-radius: 4px;   /* less round */
  --etool-gap: 10px;

}

/* ---------- LIGHT THEME OVERRIDES ---------- */
html[data-bw-theme="light"],
body[data-bw-theme="light"],
html[data-theme="light"],
body[data-theme="light"],
html.theme-light,
body.theme-light,
html.is-light,
body.is-light,
html.light,
body.light{
    --etab-count-bg: rgba(15, 23, 42, 0.08);
  --etab-count-border: rgba(15, 23, 42, 0.14);
  --etab-count-text: #0f172a;

  --etabs-border: rgba(15, 23, 42, 0.12);
  --etab-hover-bg: rgba(15, 23, 42, 0.08);
  --etab-press-bg: rgba(15, 23, 42, 0.14);
  --etab-focus-ring: rgba(15, 23, 42, 0.18);
    --etab-divider: rgba(15, 23, 42, 0.10);

  --etab-text: rgba(15, 23, 42, 0.62);
  --etab-hover-text: #0f172a;
  --etab-active-text: #0f172a;

  --results-title: #0f172a;
  --results-empty: rgba(15, 23, 42, 0.55);

  --results-item-bg: #ffffff;
  --results-item-border: rgba(15, 23, 42, 0.12);
  --results-item-text: #0f172a;
  --results-item-meta: rgba(15, 23, 42, 0.55);

  --results-scroll-thumb: rgba(15,23,42,.25);
}

/* =========================================================
   Core: make inner scroll bulletproof
   ========================================================= */
.inputs-card{
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 7px;

  /* ✅ prevents any child from forcing the card to grow visually */
  overflow: hidden;
    padding: 0 !important;      /* ✅ tabs can reach the card edges */

}


/* ✅ Never let the header rows (tabs + tools) shrink when Results is capped */
.inputs-card > .etabs,
.inputs-card > .etabs-tools{
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* keep tabs height consistent always */
.inputs-card > .etabs{
  height: var(--etabs-h);
}

/* ✅ Simple readable font ONLY inside Entries/Results UI */
.inputs-card .etabs,
.inputs-card #panel-entries,
.inputs-card #panel-results{
  font-family: var(--etab-font-family);
}

/* Keep content normal weight (easy to read) */
.inputs-card #panel-entries,
.inputs-card #panel-results{
  font-weight: 400;
}

/* Tabs can stay slightly stronger */
.inputs-card .etab{
  font-weight: var(--etab-font-weight);
}

/* Less round ONLY inside this card */
.inputs-card .btn{
  border-radius: var(--etabs-radius-sm) !important;
}
.inputs-card #optionsInput{
  border-radius: var(--etabs-radius-sm) !important;
}
.inputs-card .results-item{
  border-radius: var(--etabs-radius-sm);
}

/* =========================================================
   Tabs (text-only + underline active)
   ========================================================= */
.etabs{
  position: relative;
  display: flex;
  align-items: stretch;      /* ✅ tabs fill full bar height */
  justify-content: flex-start;

  height: var(--etabs-h);
  padding: 0;                /* ✅ no top/left dead space */
    margin: 0;


  gap: 0;                    /* ✅ no flex gap (so hover fills fully) */

  background: transparent;
  border: none;


  overflow: hidden;          /* ✅ hover bg fills to the edges cleanly */
  border-top-left-radius: var(--etabs-radius-sm);
  border-top-right-radius: var(--etabs-radius-sm);
}

/* ✅ Shared animated underline that slides between tabs */
.etabs::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px; /* sits on the border line */
  height: var(--etab-underline-h);

  width: var(--etabs-underline-w, 0px);
  transform: translateX(var(--etabs-underline-x, 0px));

  background: var(--etab-active-text);
    border-radius: 0;


  will-change: transform, width;
  transition:
    transform 420ms cubic-bezier(.22, 1.25, .36, 1),
    width     360ms cubic-bezier(.22, 1, .36, 1);
      z-index: 3;
  pointer-events: none;

}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .etabs::after{ transition: none; }
}

.etab{
    gap: 10px;

  flex: 0 0 auto;
  height: 100%;                 /* ✅ fills the whole bar height */
  display: inline-flex;
  align-items: center;

  padding: 0 var(--etab-pad-x); /* ✅ uses the whole left area */
  margin: 0;

  border: none;
  background: transparent;
  border-radius: 0;

  font-family: var(--etab-font-family);
  font-weight: var(--etab-font-weight);
  font-size: var(--etab-font-size);
  letter-spacing: .25px;
  line-height: 1;

  color: var(--etab-text);

  cursor: pointer;
  position: relative;
  z-index: 2;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;

  transition: color .18s ease, background-color .16s ease, transform .08s ease;
}
.etab__count{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 22px;
  min-width: 26px;
  padding: 0 8px;

  font-size: 0.78em;     /* scales with your tab font size */
  line-height: 1;
  font-weight: 600;

  color: var(--etab-count-text);
  background: var(--etab-count-bg);
  border: 1px solid var(--etab-count-border);

  border-radius: var(--etabs-radius-sm); /* uses your existing radius var */
}

/* subtle divider line between the segments */
.etab + .etab{
  box-shadow: inset 1px 0 0 var(--etab-divider);
}

.etab:hover{
  color: var(--etab-hover-text);
  background: var(--etab-hover-bg);
}
/* ✅ “clicked” flash: darker grey for the split second you press */
.etab:active{
  background: var(--etab-press-bg);
  transform: translateY(0.5px);
}
.etab:focus-visible{
  outline: none;
  background: var(--etab-hover-bg);
  box-shadow: 0 0 0 3px var(--etab-focus-ring);
}

.etab.is-active{ color: var(--etab-active-text); }

/* ✅ Underline is now a shared slider on .etabs (animated) */
.etab.is-active::after{ display: none !important; }
/* =========================================================
   Tools row UNDER tabs (Shuffle / Sort / Add image)
   Smaller + less round + icons
   ========================================================= */

.etabs-tools{
  display: flex;
  flex-wrap: wrap;
  gap: var(--etool-gap);
 
 margin: 3px 0 0;       /* ✅ only top margin */
 padding: 14px 14px 0; /* a bit more space from tabs */

 

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  flex: 0 0 auto;
  flex-shrink: 0;
}

.etool-btn{
  height: var(--etool-h);
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  border: 0 !important;     /* removes thin lines */
  border-radius: var(--etool-radius);

  background: var(--etool-bg);
  color: var(--etool-text);

  font: inherit;
  font-size: 0.90rem;
  font-weight: 600;
  letter-spacing: .15px;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  box-shadow: none !important; /* removes thin lines */
  outline: none;

  transition: transform .08s ease, background-color .16s ease;
}

.etool-btn:hover{ background: var(--etool-hover); }
.etool-btn:active{ background: var(--etool-press); transform: translateY(0.5px); }

.etool-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .22) !important;
}

.etool-ico{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
}


/* Panels area must be allowed to shrink and must clip overflow */
.etabs__panels{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;  /* ✅ nice spacing for label/textarea/results */

  /* ✅ this is what stops “expand downwards” */
  overflow: hidden;
}

/* Each panel fills the available panels area */
.etab-panel{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.etab-panel[hidden]{ display: none !important; }

/* =========================================================
   Entries: textarea uses full available space (no blank bottom)
   ========================================================= */
#panel-entries{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#panel-entries .inputs-card__label,
#panel-entries .inputs-card__actions,
#panel-entries .inputs-card__hint{
  flex: 0 0 auto;
}

/* ✅ Fill remaining height, but keep minimum usable size */
#panel-entries #optionsInput{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;

  resize: none;
  overflow: auto;
}





@media (max-width: 1023px){
  #panel-entries #optionsInput{ min-height: var(--entries-min-h); }
}

/* =========================================================
   Results: list scrolls INSIDE (never grows the card)
   ========================================================= */
#panel-results{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* ✅ prevents pushing the card */
  overflow: hidden;
}

.results-head{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.results-title{
  font-weight: 800;
  color: var(--results-title);
  letter-spacing: .2px;
}

.results-clear{
  padding: 0.45rem 0.85rem;
  border-radius: var(--etabs-radius-sm);
}

.results-empty{
  flex: 0 0 auto;
  color: var(--results-empty);
  font-size: 0.9rem;
  padding: 10px 2px;
}

/* ✅ The actual “never expand” rule */
.results-list{
  flex: 1 1 auto;
  min-height: 0;

  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  gap: 10px;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  padding-right: 6px;
  cursor: grab;
}
.results-list.is-dragging{
  cursor: grabbing;
  user-select: none;
}

.results-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;

  background: var(--results-item-bg);
  border: 1px solid var(--results-item-border);
}

.results-item__label{
  color: var(--results-item-text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-item__meta{
  color: var(--results-item-meta);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Scrollbar */
.results-list::-webkit-scrollbar{ width: 10px; }
.results-list::-webkit-scrollbar-thumb{
  background: var(--results-scroll-thumb);
   border-radius: 0;

  border: 2px solid transparent;
  background-clip: content-box;
}

/* =========================================================
   HARD CAP (ONLY when Results tab is open)
   This is the “old perfect” behavior: card cannot expand.
   JS toggles .inputs-card.is-results
   ========================================================= */
.inputs-card.is-results{
  overflow: hidden !important;
  max-height: var(--results-card-cap) !important;
}
@media (min-width: 1024px){
  .inputs-card.is-results{
    max-height: var(--results-card-cap-desktop) !important;
  }
}

@media (min-width: 768px){
  .etab{ font-size: var(--etab-font-size-desktop); }
}


/* =========================================================
   HARD FIX: Results can NEVER grow the card (bulletproof)
   - Works even if parent has auto height
   - Uses .is-results + :has() fallback
   ========================================================= */

/* ✅ When Results tab is open, cap the card height */
.inputs-card.is-results,
.inputs-card:has(#panel-results:not([hidden])){
  max-height: calc(100svh - 140px) !important; /* header + gaps */
  overflow: hidden !important;
}

/* Desktop can be a bit taller */
@media (min-width: 1024px){
  .inputs-card.is-results,
  .inputs-card:has(#panel-results:not([hidden])){
    max-height: calc(100svh - 120px) !important;
  }
}

/* Results list should FILL the panel area (same height as Entries) */
#panel-results .results-list{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
}
/* Lock Results tab height to Entries height (set by JS) */
@media (min-width: 768px){
  .inputs-card.is-results{
    height: var(--etabs-lock-card-h, auto) !important;
    min-height: var(--etabs-lock-card-h, 0px) !important;
  }
}
/* =========================================================
   Dropdown menu for Add image
   ========================================================= */
.etool-dd{
  position: relative;
  display: inline-flex;
  z-index: 9999; /* ✅ sits above tabs/panels */
}


.etool-btn--dd .etool-chev{
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 0.9;
}

.etool-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  /* ✅ FORCE ON TOP */
  z-index: 10000;

  min-width: 230px;
  padding: 6px;

  border-radius: 10px;
  background: rgba(2, 6, 23, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);

  display: none;
}


html[data-bw-theme="light"] .etool-menu,
html[data-theme="light"] .etool-menu,
body[data-theme="light"] .etool-menu{
  background: rgba(255,255,255,0.98);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

.etool-dd.is-open .etool-menu{ display: block; }

.etool-menu__item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 10px;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: var(--etab-hover-text);
  border-radius: 8px;

  cursor: pointer;
  text-align: left;

  /* ✅ match site font + not bold */
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;

  /* ✅ never wrap */
  white-space: nowrap;
}


.etool-menu__item span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* shows ... instead of wrapping */
}

.etool-menu__item:hover{
  background: var(--etab-hover-bg) !important;
}

.etool-menu__item:active{
  background: var(--etab-press-bg) !important;
}



/* FINAL CLICK LAYER FIX (paste last) */
.etabs-tools{ position: relative; z-index: 2000; }
.etabs__panels{ position: relative; z-index: 1; }
/* Entries inline preview (token images) */
.einline{
  margin-top: 10px;
}

.einline__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.einline__row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(148,163,184,0.10);
}

html[data-theme="light"] .einline__row,
body[data-theme="light"] .einline__row{
  background: rgba(15,23,42,0.06);
}

.einline__thumb{
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(148,163,184,0.22);
  flex: 0 0 26px;
}

.einline__thumb.is-empty{
  background: rgba(148,163,184,0.10);
}

.einline__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,0.55);
  flex: 0 0 8px;
}

.einline__label{
  color: rgba(248,250,252,0.92);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="light"] .einline__label,
body[data-theme="light"] .einline__label{
  color: #0f172a;
}




/* =========================================
   Inline [img:XXXX] thumbnails (mask token text)
   - Normal text stays native in the textarea
   - Token-only lines get masked + thumbnail drawn
   ========================================= */

.optimg-ta-wrap{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

#optionsInput{
  position: relative;
  z-index: 1;
}

/* Overlay sits above textarea */
.optimg-ta-overlay{
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;

  /* no double text; only images show */
  color: transparent;

  /* JS sets this to match your textarea background */
  background: transparent;
}

.optimg-ta-inner{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}

.optimg-ta-line{
  line-height: inherit;
}

/* Token line: cover the token text underneath with an opaque mask */
.optimg-ta-line.is-img{
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--optimg-mask-bg, transparent);
}

/* Thumbnail */
.optimg-ta-thumb{
  width: var(--optimg-thumb, 22px);
  height: var(--optimg-thumb, 22px);
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(148,163,184,0.22);
}
/* =========================================================
   Inline [img:XXXX] overlay — IMPORTANT: prevent double text
   ========================================================= */

/* Textarea stays editable, but its text is hidden (overlay draws it) */
#optionsInput.optimg-ta{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  caret-color: rgba(248,250,252,0.92) !important;
}

/* Light theme caret */
html[data-theme="light"] #optionsInput.optimg-ta,
body[data-theme="light"] #optionsInput.optimg-ta,
html[data-bw-theme="light"] #optionsInput.optimg-ta,
body[data-bw-theme="light"] #optionsInput.optimg-ta{
  caret-color: #0f172a !important;
}