/* ============================================================
 * LncACTdb 4.0 — Single-cell ceRNA Expression tool (page-specific)
 * Loaded after tools/lncact-tools.css.
 * ============================================================ */

/* chart height — tall for a full embedding view */
#sceChart { height: 700px; }

/* cell-count chip + value label in the title */
.la-sc-cells {
  font: 600 12px var(--la-mono);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
  color: var(--la-primary-d);
  background: var(--la-bg-tint);
  border: 1px solid var(--la-line);
}
.la-sce-vallabel {
  font: 600 12px var(--la-font);
  color: var(--la-muted);
  margin-left: 8px;
  vertical-align: middle;
}

/* ---- TomSelect select styling (dataset + lnc + gene): 34px, arrow, hover ---- */
#sceDataset + .ts-wrapper .ts-control,
#sceLnc + .ts-wrapper .ts-control,
#sceGene + .ts-wrapper .ts-control {
  min-height:35px;
  padding: 8px 32px 8px 14px;
  font-size: 13.5px;
  border-radius: 10px;
  border: 1px solid var(--la-line);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#sceDataset + .ts-wrapper .ts-control:hover,
#sceLnc + .ts-wrapper .ts-control:hover,
#sceGene + .ts-wrapper .ts-control:hover {
  background-color: var(--la-bg-tint, rgba(67, 56, 202, 0.04));
  border-color: rgba(67, 56, 202, 0.4);
}

/* chevron arrow for tom-select dropdowns */
#sceDataset + .ts-wrapper.single::after,
#sceLnc + .ts-wrapper.single::after,
#sceGene + .ts-wrapper.single::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  border-left: 2px solid var(--la-muted, #94a3b8);
  border-bottom: 2px solid var(--la-muted, #94a3b8);
  border-right: none;
  border-top: none;
  background: none;
  transform: translateY(-65%) rotate(-45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
  z-index: 3;
  pointer-events: none;
}
#sceDataset + .ts-wrapper.single.dropdown-active::after,
#sceLnc + .ts-wrapper.single.dropdown-active::after,
#sceGene + .ts-wrapper.single.dropdown-active::after {
  transform: translateY(-35%) rotate(135deg);
  border-color: var(--la-primary);
}

/* dataset value dropdown — wider floating panel */
#sceDataset + .ts-wrapper .ts-dropdown { width: 420px; }

/* no-wrap + ellipsis on selected item */
#sceDataset + .ts-wrapper.single .ts-control,
#sceLnc + .ts-wrapper.single .ts-control,
#sceGene + .ts-wrapper.single .ts-control { flex-wrap: nowrap; overflow: hidden; padding-right: 28px; }
#sceDataset + .ts-wrapper.single .ts-control > .item,
#sceLnc + .ts-wrapper.single .ts-control > .item,
#sceGene + .ts-wrapper.single .ts-control > .item {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* dataset rich rows */
.la-opt--ds { display: flex; }
.la-ds-name { flex: 0 1 auto; min-width: 0; font-weight: 700; color: var(--la-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-ds-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.la-ds-cond { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 10px var(--la-mono); text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 5px; color: #b45309; background: rgba(245,158,11,.14); }
.la-ds-cond--norm { color: #047857; background: rgba(16,185,129,.12); }
.la-ds-sp { font: italic 600 11px var(--la-font); color: var(--la-muted); }
.la-ds-cnt { font: 600 11px var(--la-mono); color: var(--la-primary-d);
  background: var(--la-bg-tint); border: 1px solid var(--la-line); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.la-opt-name { flex: 1 1 auto; }

/* ---- native selects (#sceMode, #sceMethod): 40px height, SVG chevron ---- */
#sceMode,
#sceMethod {
  width: 100%;
  box-sizing: border-box;
  min-height: 35px;
  border: 1px solid var(--la-line);
  border-radius: 10px;
  padding: 8px 32px 8px 14px;
  font: 500 13.5px var(--la-font);
  color: var(--la-ink-2);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 12px 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sceMode:hover,
#sceMethod:hover {
  background-color: var(--la-bg-tint, rgba(67, 56, 202, 0.04));
  border-color: rgba(67, 56, 202, 0.4);
}
#sceMode:focus,
#sceMethod:focus {
  outline: none;
  border-color: var(--la-primary);
  box-shadow: 0 0 0 3px rgba(var(--la-primary-rgb), .12);
}
/* #sceMethod sits in the chart header — keep it compact */
#sceMethod { width: auto; min-width: 130px; margin-left: 6px; }

/* ---- fixed type label (lncRNA violet / mRNA green) ---- */
.la-dualpick { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.la-dualpick__static { display: flex; align-items: center; justify-content: center;
  min-height:35px; padding: 0 10px; border-radius: 8px; border: 1.5px solid;
  font: 700 12px var(--la-font); letter-spacing: .02em; white-space: nowrap; }
.la-dualpick__static--lnc { color: var(--la-lnc); background: rgba(124,58,237,.10); border-color: rgba(124,58,237,.45); }
.la-dualpick__static--mrna { color: #047857; background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.45); }

/* ---- Display Settings checkboxes ---- */
.la-sc-display { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--la-line); }
.la-sc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; }
.la-sc-checks label { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--la-font);
  color: var(--la-ink-2); cursor: pointer; }
.la-sc-checks input[type=checkbox] { accent-color: var(--la-primary); width: 15px; height: 15px; cursor: pointer; }

/* ---- point-size slider ---- */
.la-symslider { display: inline-flex; align-items: center; gap: 8px; color: var(--la-muted);
  background: var(--la-bg-soft); border: 1px solid var(--la-line); border-radius: 10px; padding: 6px 12px; }
.la-symslider i { color: var(--la-primary); opacity: .75; font-size: 11px; }
.la-symslider input[type=range] { width: 92px; accent-color: var(--la-primary); cursor: pointer; }

/* aside z-index to keep dropdown over chart */
.la-tool-aside {  z-index: 49; }
.la-tool-main { position: relative; z-index: 1; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  #sceChart { height: 500px; }
  #sceDataset + .ts-wrapper .ts-dropdown { width: 100%; }
  .la-sc-checks { grid-template-columns: 1fr; }
}
/* ============================================================
 * 追加覆盖区（放在文件最末尾，覆盖上面的旧规则）
 * 1) Mode/Method 转 TomSelect 后的样式  2) 旧原生 select 中和
 * 3) lnc/gene 标签缩窄  4) lnc/gene 下拉浮层加宽
 * ============================================================ */

/* --- 1. #sceMode / #sceMethod 现在是 TomSelect，套用和其它框一致的样式 --- */
#sceMode + .ts-wrapper .ts-control,
#sceMethod + .ts-wrapper .ts-control {
  min-height: 35px;
  padding: 8px 32px 8px 14px;
  font-size: 13.5px;
  border-radius: 10px;
  border: 1px solid var(--la-line);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#sceMode + .ts-wrapper .ts-control:hover,
#sceMethod + .ts-wrapper .ts-control:hover {
  background-color: var(--la-bg-tint, rgba(67, 56, 202, 0.04));
  border-color: rgba(67, 56, 202, 0.4);
}

/* chevron 箭头 */
#sceMode + .ts-wrapper.single::after,
#sceMethod + .ts-wrapper.single::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  border-left: 2px solid var(--la-muted, #94a3b8);
  border-bottom: 2px solid var(--la-muted, #94a3b8);
  border-right: none;
  border-top: none;
  background: none;
  transform: translateY(-65%) rotate(-45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
  z-index: 3;
  pointer-events: none;
}
#sceMode + .ts-wrapper.single.dropdown-active::after,
#sceMethod + .ts-wrapper.single.dropdown-active::after {
  transform: translateY(-35%) rotate(135deg);
  border-color: var(--la-primary);
}

/* 选中项不换行 + 省略号 */
#sceMode + .ts-wrapper.single .ts-control,
#sceMethod + .ts-wrapper.single .ts-control { flex-wrap: nowrap; overflow: hidden; padding-right: 28px; }
#sceMode + .ts-wrapper.single .ts-control > .item,
#sceMethod + .ts-wrapper.single .ts-control > .item {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* #sceMethod 在图表头部 — 紧凑宽度（作用到 TomSelect 外壳，不再作用于原生 select） */
#sceMethod + .ts-wrapper { width: auto; min-width: 150px; margin-left: 6px; vertical-align: middle; }

/* --- 2. 中和旧的原生 #sceMode/#sceMethod 规则（TomSelect 已把原生 select 隐藏，
        但保险起见把可能露出的原生外观去掉） --- */
#sceMode, #sceMethod { background-image: none; }

/* --- 3. lnc/gene 左侧静态标签缩窄，把宽度还给选择框（92px → 64px） --- */
.la-dualpick { grid-template-columns: 64px 1fr; }
.la-dualpick__static { padding: 0 6px; }

/* --- 4. lnc/gene 展开浮层加宽，长基因名能完整显示 --- */
#sceLnc + .ts-wrapper .ts-dropdown,
#sceGene + .ts-wrapper .ts-dropdown { width: 320px; }