/* --- ツール外に影響を与えないスコープ付きデザイン --- */

/* 基盤デザイン */
.bb-tool-island { 
  margin: -60px auto 80px; padding: 40px; background: #fff; border-radius: 12px; 
  box-shadow: 0 30px 60px rgba(0,0,0,.1); border: 1px solid #edf2f7; 
  max-width: 1100px; box-sizing: border-box; text-align: left;
}

.bb-tool-island .tool-main-header { text-align: center; margin-bottom: 40px; }
.bb-tool-island .tool-main-title { font-size: 28px; font-weight: 900; color: #1e293b; margin: 0 0 10px; }
.bb-tool-island .ver-badge { font-size: 14px; background: #a78bfa; color: #fff; padding: 2px 8px; border-radius: 4px; vertical-align: middle; }
.bb-tool-island .tool-main-sub { font-size: 15px; color: #64748b; margin: 0; }

/* 2カラム 4:6比率 */
.bb-tool-island .bb-grid-layout { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }

@media (min-width: 960px) {
  .bb-tool-island .bb-grid-layout { grid-template-columns: 0.8fr 1.2fr; }
  .bb-tool-island .bb-tool-preview { position: sticky !important; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
}

/* パネル装飾 */
.bb-tool-island .bb-panel { background: #f8fafc; border: 1px solid #edf2f7; border-radius: 20px; padding: 25px; box-sizing: border-box; }
.bb-tool-island .tool-section-label { font-size: 18px; font-weight: 800; color: #334155; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.bb-tool-island .tool-section-label::after { content: ""; height: 2px; flex: 1; background: #e2e8f0; }

/* フォーム要素：ここをツール内限定に絞り込み */
.bb-tool-island .form-row { margin-bottom: 20px; text-align: left; }
.bb-tool-island .form-row label { font-size: 13px; font-weight: 800; color: #475569; margin-bottom: 8px; display: block; }

.bb-tool-island .bb-select, 
.bb-tool-island input[type="text"], 
.bb-tool-island input[type="number"] { 
  border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px; 
  font-size: 15px; width: 100%; box-sizing: border-box; 
  background: #fff; transition: 0.2s; 
}

/* フォーカス時の色もツール内限定 */
.bb-tool-island .bb-select:focus, 
.bb-tool-island input:focus { 
  border-color: #a78bfa !important; outline: none; 
  box-shadow: 0 0 0 4px rgba(167,139,250,0.1) !important; 
}

.bb-tool-island .bb-hint { font-size: 12px; color: #94a3b8; margin-top: 6px; }

.bb-tool-island .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
.bb-tool-island .bb-presets { display: flex; gap: 5px; margin-top: 8px; }
.bb-tool-island .bb-preset { padding: 6px 12px; border: 2px solid #e2e8f0; background: #fff; border-radius: 8px; font-size: 12px; font-weight: 800; color: #64748b; cursor: pointer; }
.bb-tool-island .bb-preset:hover { border-color: #a78bfa; color: #a78bfa; background: #f5f3ff; }

.bb-tool-island .bb-opt-list { display: flex; flex-direction: column; gap: 10px; }
.bb-tool-island .bb-opt-list label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; margin: 0; }
.bb-tool-island .bb-opt-list input[type="checkbox"] { width: 18px; height: 18px; accent-color: #a78bfa; margin: 0; }

/* 結果リスト */
.bb-tool-island .bb-mini { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b; font-weight: 800; margin-bottom: 15px; text-transform: uppercase; }
.bb-tool-island .bb-mini::before { content: ""; width: 4px; height: 14px; background: #a78bfa; border-radius: 2px; }
.bb-tool-island .bb-row { display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: 12px; padding: 15px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 10px; transition: 0.2s; }
.bb-tool-island .bb-row:hover { transform: translateX(4px); border-color: #a78bfa; }
.bb-tool-island .bb-idx { font-weight: 900; color: #a78bfa; font-size: 14px; }
.bb-tool-island .bb-title-text { font-size: 14px; font-weight: 700; color: #1e293b; line-height: 1.5; text-align: left; }
.bb-tool-island .bb-type-label { font-size: 10px; font-weight: 800; color: #a78bfa; border: 1px solid #a78bfa; padding: 2px 6px; border-radius: 4px; margin-right: 8px; background: #f5f3ff; vertical-align: middle; }
.bb-tool-island .bb-row-badge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 20px; }
.bb-tool-island .bb-row-badge.ok { color: #10b981; background: #ecfdf5; border: 1px solid #d1fae5; }
.bb-tool-island .bb-copy-btn-small { padding: 8px 12px; font-size: 11px; font-weight: 800; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; color: #64748b; }

/* プロンプトエリア装飾 */
.bb-tool-island #ai-copy-area { margin-top: 40px; padding-top: 30px; border-top: 2px dashed #e2e8f0; width: 100%; box-sizing: border-box; }
.bb-tool-island .bb-pre { background: #f8fafc !important; color: #334155 !important; border: 2px solid #a78bfa !important; border-radius: 16px; padding: 25px !important; font-family: ui-monospace, monospace; line-height: 1.7; resize: vertical; width: 100%; box-sizing: border-box; height: 350px; }
.bb-tool-island .copy-btn-wrap { text-align: center; margin-top: 20px; }

/* メインボタン（グラデーション） */
.bb-tool-island .btn--generate { appearance: none; background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%) !important; color: #fff !important; border: none !important; min-height: 60px; border-radius: 50px; font-size: 18px; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; box-shadow: 0 10px 15px -3px rgba(167, 139, 250, 0.4); width: 100%; }
.bb-tool-island .btn--generate:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(167, 139, 250, 0.5); }
.bb-tool-island .copy-btn-wrap .btn--generate { width: auto; padding: 0 60px; }

@media (max-width: 768px) {
  .bb-tool-island .bb-grid-layout { grid-template-columns: 1fr; }
  .bb-tool-island .bb-row { grid-template-columns: 20px 1fr; }
  .bb-tool-island .bb-row-badge, .bb-tool-island .bb-copy-btn-small { grid-column: 2; justify-self: start; margin-top: 5px; }
}
/* --- スマホ対応 (768px以下) のパディング調整 --- */

@media (max-width: 768px) {
  /* 外枠の余白を16pxに */
  .bb-tool-island { 
    padding: 16px !important; 
    margin-top: -80px; /* 必要に応じて調整してください */
  }

  /* パネル内の余白を16pxに */
  .bb-tool-island .bb-panel { 
    padding: 16px !important; 
  }

  /* グリッドを縦一列に */
  .bb-tool-island .bb-grid-layout { 
    grid-template-columns: 1fr; 
    gap: 20px; 
  }

  /* 結果リストの表示調整 */
  .bb-tool-island .bb-row { 
    grid-template-columns: 20px 1fr; 
    padding: 12px; 
  }

  .bb-tool-island .bb-row-badge, 
  .bb-tool-island .bb-copy-btn-small { 
    grid-column: 2; 
    justify-self: start; 
    margin-top: 5px; 
  }

  /* ボタンサイズの調整 */
  .bb-tool-island .btn--generate { 
    font-size: 16px; 
    min-height: 50px; 
  }

  /* プロンプトエリアの調整 */
  .bb-tool-island .bb-pre { 
    padding: 12px !important; 
    font-size: 13px; 
    height: 250px; 
  }
}