/* =========================================================
   romptn Prompt Builder – Refactored CSS (Adopted Design)
   - Dark background friendly
   - Tabs/Chips unified
   - Theme button overrides (minimal but decisive)
   ========================================================= */

/* -------------------------
   Design Tokens
   ------------------------- */
.romptn-pb{
  --pb-accent: #7b3fe4;                 /* 紫 */
  --pb-accent-ink: #4b1fb8;             /* 紫文字（明背景用） */
  --pb-text: #ffffff;                   /* 白文字（暗背景用） */
  --pb-text-dim: rgba(255,255,255,.70); /* 補助文字 */
  --pb-surface: #ffffff;                /* 白背景（textareaなど） */
  --pb-border: rgba(0,0,0,.12);
  --pb-radius: 12px;
  --pb-pill: 9999px;
  --pb-shadow-soft: 0 6px 18px rgba(123,63,228,.25);
  --pb-shadow-strong: 0 8px 22px rgba(0,0,0,.25);

  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:8px 0 24px;
  box-sizing:border-box;
  font-family:inherit;
}

/* -------------------------
   Top: Prompt field
   ------------------------- */
.romptn-pb__top{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.romptn-pb__field{
  flex:1 1 520px;
  min-width:320px;
}

.romptn-pb__label{
  display:block;
  font-weight:700;
  margin:0 0 8px;
  color: var(--pb-text);
}

.romptn-pb__textarea{
  width:100%;
  min-height:84px;
  border:1px solid var(--pb-border);
  border-radius:var(--pb-radius);
  padding:12px;
  box-sizing:border-box;
  background:var(--pb-surface);
  color:#111;
}

/* -------------------------
   Actions
   ------------------------- */
.romptn-pb__actions{
  display:flex;
  gap:10px;
}

/* -------------------------
   Selected Prompt Area
   ------------------------- */
.romptn-pb__selected{
  margin-top:14px;
  padding:10px 12px;
  border:1px dashed rgba(255,255,255,.22);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}

.romptn-pb__selected-title{
  font-weight:700;
  margin-bottom:10px;
  color: var(--pb-text);
}

.romptn-pb__selected-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* -------------------------
   Section / Tabs
   ------------------------- */
.romptn-pb__section{
  margin-top:18px;
}

.romptn-pb__section-title{
  font-weight:800;
  margin:0 0 10px;
  color: var(--pb-text);
}

.romptn-pb__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 10px;
}

/* -------------------------
   Chips Area
   ------------------------- */
.romptn-pb__chips-wrap{
  margin-top:6px;
}

.romptn-pb__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* -------------------------
   Empty message
   ------------------------- */
.romptn-pb__empty{
  padding:12px 10px;
  border-radius:var(--pb-radius);
  background:rgba(255,255,255,.06);
  color: var(--pb-text-dim);
  font-weight:700;
  display:none;
}

/* =========================================================
   Base button reset (theme-proof)
   - Keep it scoped to .romptn-pb only
   ========================================================= */
.romptn-pb button,
.romptn-pb .romptn-pb__btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  background-image:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
  border:0;
  outline:none;
}

/* Stop theme hover effects */
.romptn-pb button:hover,
.romptn-pb button:focus,
.romptn-pb button:active{
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
}

/* =========================================================
   Buttons (copy/clear)
   ========================================================= */
.romptn-pb__btn{
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:700;
  line-height:1;
}

.romptn-pb__btn--copy{
  background:var(--pb-accent) !important;
  color:#fff !important;
}

.romptn-pb__btn--clear{
  background:#ff8a00 !important;
  color:#fff !important;
}

/* =========================================================
   Unified Pill UI: Tabs & Chips
   - Unselected: transparent + purple border + white text
   - Active: accent filled + white text
   ========================================================= */

/* Pill base (tabs + item chips) */
.romptn-pb button.romptn-pb__tab,
.romptn-pb button.romptn-pb__chip.romptn-pb__chip--item{
  border:2px solid var(--pb-accent) !important;
  border-radius:var(--pb-pill) !important;
  background:transparent !important;
  color:var(--pb-text) !important;
  cursor:pointer;
  line-height:1 !important;
}

/* Tab sizing */
.romptn-pb button.romptn-pb__tab{
  padding:10px 14px !important;
  font-weight:800 !important;
}

/* Chip sizing */
.romptn-pb button.romptn-pb__chip.romptn-pb__chip--item{
  padding:8px 14px !important;
  font-weight:700 !important;
}

/* Active (tabs + chips) */
.romptn-pb button.romptn-pb__tab.is-active,
.romptn-pb button.romptn-pb__chip.romptn-pb__chip--item.is-active{
  background:var(--pb-accent) !important;
  border-color:var(--pb-accent) !important;
  color:#fff !important;
  box-shadow:var(--pb-shadow-soft) !important;
}

/* =========================================================
   Selected chips (top area): glassy + close badge
   ========================================================= */
.romptn-pb .romptn-pb__selected-chips .romptn-pb__chip--selected{
  border:1px solid rgba(123,63,228,.55) !important;
  background:rgba(123,63,228,.18) !important;
  color:#fff !important;
  border-radius:var(--pb-pill) !important;
  padding:8px 12px !important;
  font-weight:800 !important;
  box-shadow:var(--pb-shadow-strong) !important;
}

/* Close "x" badge */
.romptn-pb .romptn-pb__chip--selected .romptn-pb__chip-x{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-left:8px;
  border-radius:var(--pb-pill);
  border:1px solid rgba(255,255,255,.35);
  opacity:.95;
}

/* =========================================================
   Minor improvements
   ========================================================= */
@media (max-width: 520px){
  .romptn-pb__actions{
    width:100%;
    justify-content:flex-start;
  }
}

/* =========================================
   チップ内：ラベル + トークン表示
   ========================================= */

.romptn-pb .pb-chip-label{
  font-weight: 800;
  white-space: nowrap;
}

.romptn-pb .pb-chip-token{
  margin-left: 8px;
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.65;
  white-space: nowrap;
}

/* 選択中はトークンもくっきり */
.romptn-pb .romptn-pb__chip--item.is-active .pb-chip-token{
  opacity: 0.9;
}