/* Collapsed image-module picker (home + create composers).
   Mirrors the canvas capability picker: the primary tab stays visible and the
   remaining modules fold into one compact trigger that opens an icon grid on
   <body>. The hidden .module-picker-source buttons stay the authoritative
   option list for the pages' existing tab-switching code, so this file only
   styles the new trigger/menu surfaces and the pill container that hosts them. */

.module-picker {
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
}

/* Authoritative option list: kept in the markup for the page's existing
   [data-tab] / [data-home-image-module] code paths, never visible. */
.module-picker-source {
  display: none;
}

/* The trigger keeps a permanent box (user request, 2026-09): the 图像功能 /
   视频功能 dropdown must read as a control in every state, not only once a
   module is selected. Palette mirrors the bottom-row select chrome
   (.create-select-trigger): 10-15% white hairline + 5% white fill. The 1px
   border existed before as transparent, so the box adds no geometry. */
.module-picker-trigger {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 168px;
  min-height: 32px;
  max-width: 100%;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-picker-trigger:hover,
.module-picker-trigger.is-open,
.module-picker-trigger.active {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.module-picker-trigger.is-empty {
  color: rgba(255, 255, 255, 0.45);
}

.module-picker-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* Active state reuses the page's .tab-item.active language (soft fill + the
   conic-gradient hairline ring from the tapnow theme). */
body.create-page .module-picker-trigger.active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from 270deg at 50% 50%,
    transparent 0%,
    rgba(144, 144, 144, 0.45) 25%,
    transparent 50%,
    rgba(144, 144, 144, 0.45) 75%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.module-picker-trigger-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.module-picker-trigger-icon .ui-icon {
  width: 15px;
  height: 15px;
}

.module-picker-trigger-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-picker-trigger-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.module-picker-trigger-arrow .ui-icon {
  width: 13px;
  height: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.module-picker-trigger.is-open .module-picker-trigger-arrow {
  transform: rotate(180deg);
}

.module-picker-trigger:hover .module-picker-trigger-arrow .ui-icon,
.module-picker-trigger.active .module-picker-trigger-arrow .ui-icon {
  color: rgba(255, 255, 255, 0.7);
}

/* The tool-tab row hosting the picker (image composer 图像功能 and video
   composer 视频功能) is no longer rendered as a visible dark bar: the row
   spans the full composer width, so any background/border shows up as a
   long strip to the right of the buttons. Keep the 1px border transparent
   (geometry is preserved, so the 生图 / 视频创作 tab and the picker trigger
   stay at their original positions) and clear the fill and inset shadow. */
body.create-page .image-composer-panel .tabs:has(.module-picker),
body.create-page .video-composer-panel .tabs:has(.module-picker),
body.home-page.create-page .home-input-panel .tabs:has(.module-picker) {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px !important;
}

.module-picker-menu {
  position: fixed;
  z-index: 1400;
  box-sizing: border-box;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: left top;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #1c1c1e;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  animation: modulePickerMenuIn 170ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.module-picker-menu.is-dropup {
  transform-origin: left bottom;
  animation-name: modulePickerMenuUp;
}

.module-picker-menu-grid {
  display: grid;
  grid-template-columns: repeat(var(--module-picker-columns, 3), minmax(0, 1fr));
  gap: 5px;
}

.module-picker-option {
  position: relative;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-picker-option:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}

.module-picker-option.is-keyboard-active:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.module-picker-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.module-picker-option.is-selected {
  background: #4a4a4a;
  color: #f5f5f5;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}

.module-picker-option.is-selected:hover {
  background: #565656;
}

.module-picker-option:disabled,
.module-picker-option:disabled:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  cursor: not-allowed;
}

/* Empty-module placeholder cell (a picker that ships with an empty option
   list, e.g. 电商功能 before its sub-features land): one inert row so the
   folded trigger still opens a real menu. */
.module-picker-option-empty {
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  min-height: 64px;
}

.module-picker-option-empty .module-picker-option-icon .ui-icon {
  color: rgba(255, 255, 255, 0.35);
}

.module-picker-option-icon {
  display: inline-flex;
}

.module-picker-option-icon .ui-icon {
  width: 18px;
  height: 18px;
}

/* Capability names wrap to at most two lines instead of ellipsizing — same
   contract as the canvas capability picker (static/css/canvas/context-panel.css):
   the 电商功能 names are marketing names (淘宝一键套图) and must stay whole.
   The 电商 picker also declares data-picker-max-columns="2" plus
   data-picker-min-width="240" so the common case still fits one line. */
.module-picker-option-label {
  max-width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow: hidden;
  overflow-wrap: break-word;
}

.module-picker-option-check {
  position: absolute;
  top: 5px;
  right: 6px;
  display: inline-flex;
}

.module-picker-option-check .ui-icon {
  width: 12px;
  height: 12px;
}

@keyframes modulePickerMenuIn {
  from {
    opacity: 0;
    transform: translate3d(0, -5px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes modulePickerMenuUp {
  from {
    opacity: 0;
    transform: translate3d(0, 5px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .module-picker-trigger-arrow,
  .module-picker-menu {
    transition: none;
    animation: none;
  }
}

@media (max-width: 520px) {
  .module-picker-trigger {
    min-width: 0;
    flex: 1 1 auto;
  }
}