/*WEBページ全体の初期設定を無しにする*/
*{
  box-sizing: border-box;
}

/*WEBページの基本設定*/
body{
  margin:0;
  min-height:100vh;
  font-family:sans-serif;
}

/*ジェネレーターとしての基本設定*/
.tip-generator{
  min-height: 100vh;
  padding:20px;
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 229, 255, 0.10), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(110, 110, 255, 0.12), transparent 30%),
    #111827;
  color: #f9fafb;
  overflow-x: auto;
}

/*ページヘッダー部分の基本構成*/
.top-menu{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:16px;
  min-width: 1080px;
}

/*ページヘッダーに置くボタンのデザイン*/
.top-menu button{
  padding: 8px 12px; /* 要素内の余白(ここでは上下8px、横12px) */
  border: 1px solid #263449; /* 要素の外枠 */
  border-radius: 16px; /* 角丸 */
  background-color: #010e1b; /* 背景色 */
  color:  #9ca3af; /* ボタンの中の文字色 */
  font-size: 12px; /* 文字サイズ */
  cursor: pointer; /* ボタンにカーソルを合わせたときの形 */
}

/*ページ本体の2カラム配置*/
.tip-generator .generator-main{
  display: flex;
  align-items: stretch;
  gap:16px;
  width: 100%;
  min-width: 1080px;
}

/*左カラムのデザイン*/
.generator-main .left-column{
  width: 320px;
  max-height: calc(100vh - 110px);
  padding-right: 10px;
  flex-shrink: 0;
  align-self: flex-start;
  background-color: transparent;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/*基本設定・カスタマイズ項目の大枠*/
.left-column .settings-group{
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

/*2つの大枠の間隔*/
.left-column .settings-group + .settings-group{
  margin-top: 18px;
}

/*大項目タイトル*/
.left-column .settings-group-title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.28);
}

/*プレビュー・出力エリアのタイトル*/
.workspace-area-title{
  margin: 0 0 14px;
  color: #f9fafb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.28);
}

/*開閉する設定項目*/
.left-column .setting-item{
  margin-top: 10px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 14px;
  background-color: rgba(8, 21, 34, 0.72);
  overflow: hidden;
}

/*各大枠の先頭項目には上線を付けない*/
.left-column .setting-item:first-of-type{
  margin-top: 0;
}

/*現在編集中の小項目を強調する*/
.left-column .setting-item[open]{
  border-color: rgba(110, 110, 255, 0.62);
  box-shadow: 0 0 0 1px rgba(110, 110, 255, 0.16);
}

/*設定項目の見出し*/
.left-column .setting-item summary{
  position: relative;
  padding: 14px 34px 14px 14px;
  color: #f9fafb;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/*Chromeなどの標準矢印を消す*/
.left-column .setting-item summary::-webkit-details-marker{
  display: none;
}

/*右側の矢印*/
.left-column .setting-item summary::after{
  content: "›";
  position: absolute;
  top: 50%;
  right: 6px;
  color: #9ca3af;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.16s ease;
}

/*開いた時に矢印を下向きにする*/
.left-column .setting-item[open] summary::after{
  transform: translateY(-50%) rotate(90deg);
}

/*開いた設定内容*/
.left-column .setting-content{
  padding: 0 14px 14px;
}

/*説明文*/
.left-column .setting-description{
  margin: 0 0 10px;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.5;
}

/*入力欄のラベル*/
.left-column .setting-content label{
  display: block;
  margin: 0 0 6px;
  color: #9ca3af;
  font-size: 12px;
}

/*入力欄*/
.left-column .setting-content input,
.left-column .setting-content select,
.left-column .setting-content textarea{
  width: 100%;
  padding: 8px 10px;
  margin: 0 0 10px;
  border: 1px solid #263449;
  border-radius: 10px;
  background-color: #010e1b;
  color: #f9fafb;
  font-size: 12px;
}

/*複数行入力*/
.left-column .setting-content textarea{
  min-height: 90px;
  line-height: 1.5;
  resize: vertical;
}

/*最後の入力欄には下余白を付けない*/
.left-column .setting-content input:last-child,
.left-column .setting-content select:last-child,
.left-column .setting-content textarea:last-child{
  margin-bottom: 0;
}

/*左側スクロールバー*/
.left-column::-webkit-scrollbar{
  width: 8px;
}

.left-column::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: rgba(156, 163, 175, 0.42);
}

.left-column::-webkit-scrollbar-track{
  background-color: transparent;
}

/*右側エリアのデザイン*/
.generator-main .main-column{
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*ページ中央エリアのデザイン*/
.generator-main .center-area{
  flex: 0 0 auto;
  min-width: 0;
  background-color: transparent;
  padding:16px;
  border: 1px solid rgba(0, 229, 255, 0.68);
  border-radius:14px;

  display: flex;
  flex-direction: column;
}

.center-area .section-title{
  margin: 0px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #f9fafb;
}

.center-area .tip-start-btn{
  margin-bottom: 18px;
}

/*中央の投げ銭ボタン編集とライブプレビュー*/
.center-area .tip-start-btn,
.center-area .live-preview{
  padding: 8px 10px;
}

/*中央上の投げ銭ボタン編集*/
.tip-start-btn{
  width: 100%;
  display: flex;
  gap: 12px; /*メニュー同士の間隔*/
  align-items: flex-end; /*入力欄とプレビューボタンの下端を揃える*/
}

.tip-start-btn .button-text,
.tip-start-btn .button-background,
.tip-start-btn .button-color,
.tip-start-btn .button-radius{
  flex: 1;
  min-width: 120px;
  padding: 8px 10px;
  font-size: 12px;
  color: #d1d5db;
}

.tip-start-btn label{
  display: block;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 6px;
}

.tip-start-btn input{
  width: 100%;
  padding:8px 10px;
  border: 1px solid #263449;
  border-radius:10px;
  background-color: #010e1b;
  color: #f9fafb;
  font-size: 12px;
}

/*出力エリア：設定情報や埋め込みコードを表示する場所*/
.output-area{
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 16px;
  border: 1px solid rgba(0, 229, 255, 0.68);
  border-radius: 14px;
  background-color: transparent;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.28),
    0 0 18px rgba(0,229,255,0.06);
  position: relative;
  overflow: hidden;
}

/*保存・コピー結果を出す場所*/
.output-status{
  margin: 0;
}

/*通知文の基本設定*/
.output-status .status-message{
  margin: 0 0 5px;
}

/*通知文が空の時は表示しない*/
.output-status .status-message:empty{
  display: none;
}

/*通知文：成功・エラーの見た目*/
.status-message.is-success{
  color: #4ade80;
}

.status-message.is-error{
  color: #fb7185;
}

/*設定情報出力欄と埋め込みコード出力欄の横並び*/
.output-panels{
  display: flex;
  gap: 16px;
}

/*出力用カード*/
.json-output,
.embed-output{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*出力欄のタイトル*/
.output-title{
  font-size: 13px;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.28);
}

/*設定情報と埋め込みコードを表示するテキスト欄*/
.outputText{
  width: 100%;
  min-height: 170px;
  padding: 10px;
  border: 1px solid #263449;
  border-radius: 10px;
  background-color: #010e1b;
  color: #d1d5db;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

/*出力欄の見出し行：タイトルとコピーボタンを横並びにする*/
.output-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/*出力欄のコピー用ボタン*/
.copy-json-btn,
.copy-embed-btn{
  padding: 6px 10px;
  border: 1px solid #263449;
  border-radius: 10px;
  background-color: #010e1b;
  color: #9ca3af;
  font-size: 12px;
  cursor: pointer;
}

/*押せるボタンにマウスを乗せた時の共通反応*/
.top-menu button:hover,
.left-column .card-setting:hover,
.copy-json-btn:hover,
.copy-embed-btn:hover{
  border-color:#6E6EFF;
  background-color:#101b33;
  color:#ffffff;
}

/*コピー用ボタン：コピー成功時の見た目*/
.copy-json-btn.is-copied,
.copy-embed-btn.is-copied{
  border-color: #4ade80;
  color: #4ade80;
}

/*ジェネレーター側の入力欄・出力欄だけにフォーカス表示を適用*/
.left-column .setting-content input:focus,
.left-column .setting-content textarea:focus,
.tip-start-btn input:focus,
.custom-trigger-field input:focus,
.outputText:focus{
  outline: none;
  border-color: #6E6EFF;
  box-shadow: 0 0 0 2px rgba(110,110,255,0.18);
}

/*ジェネレーター側の操作部品だけ見た目変化をなめらかにする*/
.top-menu button,
.left-column .card-setting,
.copy-json-btn,
.copy-embed-btn,
.left-column .setting-content input,
.left-column .setting-content textarea,
.tip-start-btn input,
.custom-trigger-field input,
.outputText{
  transition: border-color 0.1s ease-out, background-color 0.1s ease-out, color 0.1s ease-out, box-shadow 0.1s ease-out;
}

/*主要パネルに軽い奥行きを出す*/
.generator-main .center-area,
.center-area .tip-start-btn,
.center-area .live-preview{
  box-shadow:
    0 10px 24px rgba(0,0,0,0.28),
    0 0 18px rgba(0,229,255,0.06);
}

/*見出し文字の質感をそろえる*/
.left-column .card-title,
.center-area .section-title{
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.28);
}

/*細部調整：大きいパネルに細いアクセントラインを入れる*/
.generator-main .center-area,
.center-area .tip-start-btn,
.center-area .live-preview{
  position: relative;
  overflow: hidden;
}

/*細部調整：パネル上部のサイバー風ライン*/
.generator-main .center-area::before,
.center-area .tip-start-btn::before,
.center-area .live-preview::before{
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 229, 255, 0.62),
    rgba(110, 110, 255, 0.38),
    transparent
  );
  pointer-events: none;
}

/*埋め込み方式の選択エリア*/
.tip-generator .embed-mode-settings{
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(0, 229, 255, 0.42);
  border-radius: 12px;
  background-color: #081522;
}

/*埋め込み方式の見出し*/
.tip-generator .embed-mode-title{
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #f9fafb;
}

/*標準／独自ボタンの選択肢*/
.tip-generator .embed-mode-options{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/*ラジオボタンと文字*/
.tip-generator .embed-mode-option{
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d1d5db;
  font-size: 12px;
  cursor: pointer;
}

/*ラジオボタンは通常サイズで表示する*/
.tip-generator .embed-mode-option input{
  width: auto;
  margin: 0;
}

/*独自ボタンのセレクター入力欄*/
.tip-generator .custom-trigger-field{
  margin-top: 12px;
}

/*hidden時は確実に非表示にする*/
.tip-generator .custom-trigger-field[hidden]{
  display: none;
}

/*独自ボタン入力欄のラベル*/
.tip-generator .custom-trigger-field label{
  display: block;
  margin-bottom: 6px;
  color: #9ca3af;
  font-size: 12px;
}

/*独自ボタンのセレクター入力*/
.tip-generator .custom-trigger-field input{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #263449;
  border-radius: 10px;
  background-color: #010e1b;
  color: #f9fafb;
  font-size: 12px;
}

/*入力例の説明*/
.tip-generator .embed-mode-help{
  margin-top: 6px;
  color: #9ca3af;
  font-size: 11px;
}

/*埋め込み方式の簡易案内*/
.tip-generator .embed-mode-guide{
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 8px;
  background-color: rgba(1, 14, 27, 0.6);
  color: #9ca3af;
  font-size: 11px;
  line-height: 1.6;
}

/*非表示の案内は確実に隠す*/
.tip-generator .embed-mode-guide[hidden]{
  display: none;
}

/*カスタマイズ項目内の投げ銭ボタン設定*/
.left-column .tip-start-btn{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/*投げ銭ボタン設定の各入力欄*/
.left-column .tip-start-btn .button-text,
.left-column .tip-start-btn .button-background,
.left-column .tip-start-btn .button-color,
.left-column .tip-start-btn .button-radius{
  min-width: 0;
  padding: 0;
}

/* =========================================================
   実ウィジェット構造のプレビュー
========================================================= */

/*プレビュー全体の枠*/
.generator-main .center-area{
  padding: 14px;
  border: 1px solid rgba(0, 229, 255, 0.42);
  border-radius: 14px;
  background-color: rgba(8, 21, 34, 0.42);
  overflow: hidden;
}

/*プレビュー枠上部の余計な装飾線は出さない*/
.generator-main .center-area::before{
  content: none;
}

/*プレビュー見出しと背景確認ボタン*/
.preview-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.preview-title-row .workspace-area-title{
  margin-bottom: 0;
}

/*背景確認ON/OFF*/
.preview-background-toggle{
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid #263449;
  border-radius: 9px;
  background-color: #010e1b;
  color: #d1d5db;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.preview-background-toggle:hover{
  border-color: #6E6EFF;
  color: #ffffff;
}

.preview-background-toggle[aria-pressed="true"]{
  border-color: #6E6EFF;
  background-color: rgba(110, 110, 255, 0.14);
  color: #ffffff;
}

/*プレビュー本体*/
.center-area .live-preview{
  position: relative;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

/*グラス効果確認用の仮背景文字*/
.preview-test-background{
  position: absolute;
  inset: 20px;
  z-index: 0;
  overflow: hidden;

  color: rgba(255,255,255,0.88);
  font-size: 20px;
  line-height: 1.8;
  word-break: break-all;

  pointer-events: none;
  user-select: none;
}

.preview-test-background[hidden]{
  display: none !important;
}

.preview-test-background[hidden]{
  display: none !important;
}

/*仮背景より実ウィジェットを前に置く*/
.start-button-preview-panel,
.generator-widget-preview{
  position: relative;
  z-index: 1;
}

.center-area .live-preview::before{
  content: none;
}

/*3シーンの切り替え欄*/
.preview-tabs{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 0;
  overflow-x: auto;
}

/*主シーン切り替え欄*/
.preview-main-tabs{
  margin-bottom: 8px;
}

/*投げ銭前の補助切り替え欄*/
.before-tip-preview-tabs{
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 0;
}

/*主シーン変更時に補助切り替え欄を隠す*/
.before-tip-preview-tabs[hidden]{
  display: none !important;
}

/*プレビュー切り替えボタン*/
.preview-tab{
  flex: 0 0 auto;
  padding: 10px 14px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background-color: transparent;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/*選択中の切り替えボタン*/
.preview-tab.is-selected{
  border-bottom-color: #6E6EFF;
  background-color: transparent;
  color: #ffffff;
}

.preview-tab:hover{
  color: #ffffff;
}

/*投げ銭前の補助切り替えボタン*/
.before-tip-preview-tab{
  padding: 6px 12px;
  border: 1px solid #263449;
  border-radius: 999px;
  background-color: #010e1b;
  font-size: 12px;
}

/*選択中の補助切り替えボタン*/
.before-tip-preview-tab.is-selected{
  border-color: #6E6EFF;
  background-color: rgba(110, 110, 255, 0.12);
  color: #ffffff;
}

/*実ウィジェットを表示するジェネレーター内の領域*/
.generator-widget-preview{
  width: 100%;
  min-height: 0;
  overflow: auto;
}

/*tipWidget.cssの適用対象*/
.generator-widget-preview .tipWidget{
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
}

/*本番では画面全体を覆うoverlayを、ジェネレーター内へ収める*/
.generator-widget-preview .tipWidget .tipOverlay{
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
}

/*埋め込み先ページ用の背景はプレビューでは表示しない*/
.generator-widget-preview .tipWidget .tipBackdrop{
  display: none !important;
}

/*本番用モーダルの固定配置を解除する*/
.generator-widget-preview .tipWidget .tipModal{
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 auto !important;
}

/*選択されていない画面を隠す*/
.generator-widget-preview .preview-screen[hidden]{
  display: none !important;
}

/*素材を通信取得しないプレビュー用の仮表示*/
.generator-widget-preview .preview-chara-placeholder{
  display: flex;
  min-height: 120px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
}

/*キャラ素材タイプ*/
.generator-widget-preview .preview-chara-type{
  font-size: 13px;
  font-weight: 700;
}

/*キャラ素材ファイル名*/
.generator-widget-preview .preview-chara-src{
  max-width: 100%;
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/*長い受取人名とTxHashが外へはみ出さないようにする*/
.generator-widget-preview .preview-confirm-recipient,
.generator-widget-preview .preview-result-txhash{
  overflow-wrap: anywhere;
  word-break: break-all;
}

/*TxHashリンクはプレビュー内では操作させない*/
.generator-widget-preview .preview-result-txhash{
  pointer-events: none;
}

/*投げ銭開始ボタンのプレビュー画面*/
.start-button-preview-panel{
  display: flex;
  width: 100%;
  min-height: 140px;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
}

.start-button-preview-panel[hidden]{
  display: none !important;
}

/*投げ銭開始ボタン*/
.start-button-preview-btn{
  min-width: 0;
  max-width: 100%;
  padding: 7px 14px;
  border: 1px solid #263449;
  border-radius: 12px;
  background-color: #6E6EFF;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tip-generator[data-generator-theme] .start-button-preview-btn{
  border-color: var(--generator-border);
}

/*スマホプレビュー時の表示幅*/
.tip-generator.is-mobile-preview .generator-widget-preview{
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
}

/* =========================================================
   キャラとメッセージの配置設定
========================================================= */

/*配置選択肢*/
.left-column .layout-position-options{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/*キャラ配置とキャラサイズの間隔*/
.left-column .layout-position-options + .range-setting-row{
  margin-top: 14px;
}

/*配置選択肢1件*/
.left-column .layout-position-option{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  margin: 0;
  border: 1px solid #263449;
  border-radius: 10px;
  background-color: #010e1b;
  color: #d1d5db;
  font-size: 12px;
  cursor: pointer;
}

/*既存の入力欄用width:100%をラジオボタンには適用しない*/
.left-column .layout-position-option input{
  width: auto;
  margin: 0;
}

/*実ウィジェット構造の配置本体*/
.generator-widget-preview .tipWidget .tipLayout{
  display: grid !important;
  gap: 16px;
  align-items: start;
}

/*キャラ*/
.generator-widget-preview .tipWidget .tipChara{
  grid-area: chara;
  min-width: 0;
}

/*文字・操作UIをまとめた情報パネル*/
.generator-widget-preview .tipWidget .tipInfoPanel{
  grid-area: info;
  min-width: 0;
}

/*上：キャラの下に情報パネル*/
.generator-widget-preview .tipWidget .tipLayout[data-visual-position="top"]{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "chara"
    "info";
}

/*下：情報パネルの下にキャラ*/
.generator-widget-preview .tipWidget .tipLayout[data-visual-position="bottom"]{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "info"
    "chara";
}

/*左：キャラを情報パネルの左へ配置*/
.generator-widget-preview .tipWidget .tipLayout[data-visual-position="left"]{
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  grid-template-areas:
    "chara info";
}

/*右：キャラを情報パネルの右へ配置*/
.generator-widget-preview .tipWidget .tipLayout[data-visual-position="right"]{
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  grid-template-areas:
    "info chara";
}

/* =========================================================
   ローカル素材プレビュー
========================================================= */

/*JavaScriptでhiddenを付けた素材要素を確実に隠す*/
.generator-widget-preview .tipChara[hidden],
.generator-widget-preview .preview-chara-placeholder[hidden],
.generator-widget-preview .tipCharaVid[hidden],
.generator-widget-preview .tipCharaImg[hidden]{
  display: none !important;
}

/*キャラなしなら情報パネルだけ表示*/
.generator-widget-preview .tipWidget .tipLayout[data-has-chara="false"]{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "info";
}

/* =========================================================
   素材アップロード時の注意ヘルプ
========================================================= */

/*素材名ラベルと注意アイコンを横並びにする*/
.left-column .asset-help-row{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

/*通常ラベルの下余白をこの行だけ消す*/
.left-column .asset-help-row > label{
  margin: 0;
}

/*注意ヘルプ本体*/
.left-column .asset-help{
  position: static;
  flex: 0 0 auto;
}

/*注意アイコン*/
.left-column .setting-item .asset-help > summary{
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid #263449;
  border-radius: 50%;
  background-color: #010e1b;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

/*Chromeなどのdetails標準マーカーを消す*/
.left-column .setting-item .asset-help > summary::-webkit-details-marker{
  display: none;
}

/*setting-item用の右矢印を注意アイコンには付けない*/
.left-column .setting-item .asset-help > summary::after,
.left-column .setting-item[open] .asset-help > summary::after{
  content: none;
}

/*注意ヘルプを開いている時*/
.left-column .asset-help[open] > summary{
  border-color: #6E6EFF;
  color: #ffffff;
  background-color: rgba(110, 110, 255, 0.18);
}

/*クリック・タップ時に表示する簡易説明*/
.left-column .asset-help-popover{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 10px 12px;
  border: 1px solid rgba(110, 110, 255, 0.55);
  border-radius: 10px;
  background-color: #081522;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/*簡易説明本文*/
.left-column .asset-help-popover p{
  margin: 0 0 8px;
  color: #d1d5db;
  font-size: 11px;
  line-height: 1.6;
}

/*将来の取扱説明ページへのリンク*/
.left-column .asset-help-link{
  display: inline-block;
  color: #8b8bff;
  font-size: 11px;
  font-weight: 700;
}

/* =========================================================
   ジェネレーター操作メニュー
========================================================= */

/*最上部の表示テーマ切り替え*/
.top-menu{
  align-items: center;
}

/*PCではテーマ切替と使い方を横並びにする*/
.generator-header-actions{
  display: flex;
  align-items: center;
  gap: 16px;
}

.generator-brand{
  margin-right: auto;
  align-self: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.generator-brand span{
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 1;
}

.tip-generator[data-generator-mode="light"] .generator-brand{ color: #111827; }
.tip-generator[data-generator-mode="light"] .generator-brand span{ color: #4b5563; }

.tip-generator[data-generator-mode="dark"] .generator-brand{ color: #f9fafb; }
.tip-generator[data-generator-mode="dark"] .generator-brand span{ color: #d1d5db; }

/* ジェネレーター使い方ページへのリンク */
.generator-help-link{
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  opacity: .8;
}

.generator-help-link:hover{
  text-decoration: underline;
  opacity: 1;
}

/*基本設定上部の下書き操作*/
.generator-local-actions{
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 0 10px;
  background: var(--generator-background, #111827);
}

.generator-local-actions button{
  padding: 10px 8px;
  border: 1px solid #263449;
  border-radius: 12px;
  background-color: #010e1b;
  color: #d1d5db;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.generator-local-actions button:hover{
  border-color: #6E6EFF;
  background-color: #101b33;
  color: #ffffff;
}

.generator-local-actions .reset-btn{
  border-color: rgba(239, 68, 68, 0.55);
  background-color: rgba(127, 29, 29, 0.28);
  color: #fecaca;
}

.generator-local-actions .reset-btn:hover{
  border-color: #ef4444;
  background-color: rgba(127, 29, 29, 0.46);
  color: #ffffff;
}

/*3シーン切替とスマホプレビュー切替を横並びにする*/
.preview-toolbar{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.preview-toolbar .preview-main-tabs{
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/*スマホプレビュー切替*/
.preview-toolbar .preview-btn{
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #263449;
  border-radius: 10px;
  background-color: #010e1b;
  color: #d1d5db;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.preview-toolbar .preview-btn:hover{
  border-color: #6E6EFF;
  background-color: #101b33;
  color: #ffffff;
}

/*設定情報出力ボタンとダウンロードボタン*/
.output-action-group{
  display: flex;
  align-items: center;
  gap: 6px;
}

.output-generate-btn,
.output-download-btn{
  padding: 6px 10px;
  border: 1px solid #263449;
  border-radius: 10px;
  background-color: #010e1b;
  color: #d1d5db;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.output-download-btn{
  white-space: nowrap;
}

.output-generate-btn:hover,
.output-download-btn:hover{
  border-color: #6E6EFF;
  background-color: #101b33;
  color: #ffffff;
}

/* =========================================================
   PC上のスマホプレビューを実機スマホと同じ配置にする
========================================================= */

/*スマホプレビューでは左右配置も1列にする*/
.tip-generator.is-mobile-preview
.generator-widget-preview
.tipWidget
.tipLayout[data-has-chara="true"][data-visual-position="left"],
.tip-generator.is-mobile-preview
.generator-widget-preview
.tipWidget
.tipLayout[data-has-chara="true"][data-visual-position="right"]{
  grid-template-columns: minmax(0, 1fr);
}

/*左指定：キャラ → 情報パネル*/
.tip-generator.is-mobile-preview
.generator-widget-preview
.tipWidget
.tipLayout[data-has-chara="true"][data-visual-position="left"]{
  grid-template-areas:
    "chara"
    "info";
}

/*右指定：情報パネル → キャラ*/
.tip-generator.is-mobile-preview
.generator-widget-preview
.tipWidget
.tipLayout[data-has-chara="true"][data-visual-position="right"]{
  grid-template-areas:
    "info"
    "chara";
}

/*キャラなしなら情報パネルだけ*/
.tip-generator.is-mobile-preview
.generator-widget-preview
.tipWidget
.tipLayout[data-has-chara="false"]{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "info";
}

/* =========================================================
   tweakcn Semantic Color
   ジェネレーター本体だけに適用
========================================================= */

/* ジェネレーター全体 */
.tip-generator[data-generator-theme]{
  --generator-background: #f8f9fa;
  --generator-foreground: #0c0c1d;
  --generator-card: #ffffff;
  --generator-primary: #ff00c8;
  --generator-secondary: #f0f0ff;
  --generator-muted: #f0f0ff;
  --generator-accent: #00ffcc;
  --generator-destructive: #ff3d00;
  --generator-border: #dfe6e9;
  --generator-input: #dfe6e9;
  --generator-ring: #ff00c8;

  background-color: var(--generator-background);
  background-image: none;
  color: var(--generator-foreground);
}

/* 基本設定・カスタマイズのカード */
.tip-generator[data-generator-theme] .left-column .settings-group{
  border-color: transparent;
  background-color: transparent;
}

/* 各領域のタイトル */
.tip-generator[data-generator-theme] .left-column .settings-group-title,
.tip-generator[data-generator-theme] .workspace-area-title{
  color: var(--generator-foreground);
  text-shadow: none;
}

/*閉じている小項目*/
.tip-generator[data-generator-theme] .left-column .setting-item{
  border: 2px solid color-mix(
    in oklab,
    var(--generator-primary) 30%,
    var(--generator-border)
  );
  background-color: var(--generator-card);
  box-shadow: none;
}

/*ホバー*/
.tip-generator[data-generator-theme] .left-column .setting-item:hover{
  border-color: color-mix(
    in oklab,
    var(--generator-primary) 55%,
    var(--generator-border)
  );
}

/*現在開いている小項目*/
.tip-generator[data-generator-theme] .left-column .setting-item[open]{
  border-color: var(--generator-primary);
  background-color: var(--generator-card);
  box-shadow: none;
}

/*開いている項目の見出しと編集部分を分ける*/
.tip-generator[data-generator-theme] .left-column .setting-item[open] > summary{
  border-bottom: 1px solid color-mix(
    in oklab,
    var(--generator-primary) 20%,
    var(--generator-border)
  );
}

/* 開いている項目の見出しを編集領域から分ける */
.tip-generator[data-generator-theme] .left-column .setting-item[open] > summary{
  border-bottom: 1px solid color-mix(
    in oklab,
    var(--generator-primary) 20%,
    var(--generator-border)
  );
}

/* 設定項目名 */
.tip-generator[data-generator-theme] .left-column .setting-item summary{
  color: var(--generator-foreground);
}

/* 設定項目の矢印 */
.tip-generator[data-generator-theme] .left-column .setting-item summary::after{
  color: color-mix(in oklab, var(--generator-foreground) 65%, transparent);
}

/* 説明文・ラベル */
.tip-generator[data-generator-theme] .left-column .setting-description,
.tip-generator[data-generator-theme] .left-column .setting-content label,
.tip-generator[data-generator-theme] .tip-start-btn label{
  color: color-mix(in oklab, var(--generator-foreground) 70%, transparent);
}

/*入力欄をカード背景から明確に区別する*/
.tip-generator[data-generator-theme] .left-column .setting-content input,
.tip-generator[data-generator-theme] .left-column .setting-content select,
.tip-generator[data-generator-theme] .left-column .setting-content textarea,
.tip-generator[data-generator-theme] .tip-start-btn input,
.tip-generator[data-generator-theme] .custom-trigger-field input{
  border: 1.5px solid color-mix(
    in oklab,
    var(--generator-foreground) 18%,
    var(--generator-border)
  );
  background-color: color-mix(
    in oklab,
    var(--generator-muted) 45%,
    var(--generator-card)
  );
  color: var(--generator-foreground);
}

/* placeholder */
.tip-generator[data-generator-theme] .left-column .setting-content input::placeholder,
.tip-generator[data-generator-theme] .left-column .setting-content textarea::placeholder,
.tip-generator[data-generator-theme] .tip-start-btn input::placeholder,
.tip-generator[data-generator-theme] .custom-trigger-field input::placeholder{
  color: color-mix(in oklab, var(--generator-foreground) 45%, transparent);
}

/* 左カラムのスクロールバー */
.tip-generator[data-generator-theme] .left-column::-webkit-scrollbar-thumb{
  background-color: var(--generator-border);
}

/* 下書き保存・復元 */
.tip-generator[data-generator-theme] .generator-local-actions button{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  color: var(--generator-foreground);
}

.tip-generator[data-generator-theme] .generator-local-actions button:hover{
  border-color: var(--generator-primary);
  background-color: color-mix(in oklab, var(--generator-primary) 8%, var(--generator-card));
  color: var(--generator-primary);
}

/* リセット */
.tip-generator[data-generator-theme] .generator-local-actions .reset-btn{
  border-color: var(--generator-destructive);
  background-color: color-mix(in oklab, var(--generator-destructive) 8%, var(--generator-card));
  color: var(--generator-destructive);
}

.tip-generator[data-generator-theme] .generator-local-actions .reset-btn:hover{
  border-color: var(--generator-destructive);
  background-color: color-mix(in oklab, var(--generator-destructive) 16%, var(--generator-card));
  color: var(--generator-destructive);
}

/* プレビュー領域 */
.tip-generator[data-generator-theme] .generator-main .center-area{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* 主シーン切り替え */
.tip-generator[data-generator-theme] .preview-tab{
  color: color-mix(in oklab, var(--generator-foreground) 65%, transparent);
}

.tip-generator[data-generator-theme] .preview-tab.is-selected{
  border-bottom-color: var(--generator-primary);
  color: var(--generator-primary);
}

.tip-generator[data-generator-theme] .preview-tab:hover{
  color: var(--generator-foreground);
}

/* 金額選択・送金前確認 */
.tip-generator[data-generator-theme] .before-tip-preview-tab{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  color: var(--generator-foreground);
}

.tip-generator[data-generator-theme] .before-tip-preview-tab.is-selected{
  border-color: var(--generator-primary);
  background-color: color-mix(in oklab, var(--generator-primary) 10%, var(--generator-card));
  color: var(--generator-primary);
}

/* PC・スマホプレビュー切り替え */
.tip-generator[data-generator-theme] .preview-toolbar .preview-btn{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  color: var(--generator-foreground);
}

.tip-generator[data-generator-theme] .preview-toolbar .preview-btn:hover{
  border-color: var(--generator-primary);
  background-color: color-mix(in oklab, var(--generator-primary) 8%, var(--generator-card));
  color: var(--generator-primary);
}

/* キャラ配置 */
.tip-generator[data-generator-theme] .left-column .layout-position-option{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  color: var(--generator-foreground);
}

/* 素材注意アイコン */
.tip-generator[data-generator-theme] .left-column .setting-item .asset-help > summary{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  color: var(--generator-foreground);
}

.tip-generator[data-generator-theme] .left-column .asset-help[open] > summary{
  border-color: var(--generator-primary);
  background-color: color-mix(in oklab, var(--generator-primary) 10%, var(--generator-card));
  color: var(--generator-primary);
}

/* 素材注意ポップアップ */
.tip-generator[data-generator-theme] .left-column .asset-help-popover{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  color: var(--generator-foreground);
}

.tip-generator[data-generator-theme] .left-column .asset-help-popover p{
  color: var(--generator-foreground);
}

.tip-generator[data-generator-theme] .left-column .asset-help-link{
  color: var(--generator-primary);
}

/* 出力領域 */
.tip-generator[data-generator-theme] .output-area{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* プレビュー・出力エリアの区画を見やすくする */
.tip-generator[data-generator-theme] .generator-main .center-area,
.tip-generator[data-generator-theme] .output-area{
  border-width: 2px;
  border-style: solid;
  border-color: var(--generator-border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

/* ダークモードでは枠と影を強める */
.tip-generator[data-generator-mode="dark"] .generator-main .center-area,
.tip-generator[data-generator-mode="dark"] .output-area{
  border-color: #4b5563;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

/* 埋め込み方式 */
.tip-generator[data-generator-theme] .embed-mode-settings{
  border-color: var(--generator-border);
  background-color: var(--generator-muted);
}

.tip-generator[data-generator-theme] .embed-mode-title,
.tip-generator[data-generator-theme] .embed-mode-option{
  color: var(--generator-foreground);
}

.tip-generator[data-generator-theme] .custom-trigger-field label{
  color: color-mix(in oklab, var(--generator-foreground) 70%, transparent);
}

.tip-generator[data-generator-theme] .embed-mode-guide{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  color: color-mix(in oklab, var(--generator-foreground) 70%, transparent);
}

/* 設定情報・埋め込みコード */
.tip-generator[data-generator-theme] .outputText{
  border-color: var(--generator-input);
  background-color: var(--generator-card);
  color: var(--generator-foreground);
}

/* 出力系ボタン */
.tip-generator[data-generator-theme] .output-generate-btn,
.tip-generator[data-generator-theme] .output-download-btn,
.tip-generator[data-generator-theme] .copy-json-btn,
.tip-generator[data-generator-theme] .copy-embed-btn{
  border-color: var(--generator-border);
  background-color: var(--generator-card);
  color: var(--generator-foreground);
}

.tip-generator[data-generator-theme] .output-generate-btn:hover,
.tip-generator[data-generator-theme] .output-download-btn:hover,
.tip-generator[data-generator-theme] .copy-json-btn:hover,
.tip-generator[data-generator-theme] .copy-embed-btn:hover{
  border-color: var(--generator-primary);
  background-color: color-mix(in oklab, var(--generator-primary) 8%, var(--generator-card));
  color: var(--generator-primary);
}

/* 成功・エラー通知 */
.tip-generator[data-generator-theme] .status-message.is-success{
  color: #16a34a;
}

.tip-generator[data-generator-theme] .status-message.is-error{
  color: var(--generator-destructive);
}

/* =========================================================
   ウィジェットデザイン設定UI
========================================================= */

/* 色設定1項目 */
.left-column .color-setting-row{
  margin-bottom: 10px;
}

/* カラーピッカーとHEX値を横並び */
.left-column .color-picker-control{
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

/* 色をクリックして選ぶ四角 */
.left-column .setting-content .color-picker-control input[type="color"]{
  width: 42px;
  height: 34px;
  padding: 3px;
  margin: 0;
  border: 1px solid var(--generator-input);
  border-radius: 8px;
  background-color: var(--generator-card);
  cursor: pointer;
}

/* Chromeのカラーピッカー内部余白を整える */
.left-column .setting-content .color-picker-control input[type="color"]::-webkit-color-swatch-wrapper{
  padding: 0;
}

/* 実際の色面 */
.left-column .setting-content .color-picker-control input[type="color"]::-webkit-color-swatch{
  border: 0;
  border-radius: 5px;
}

/* Firefox側の色面 */
.left-column .setting-content .color-picker-control input[type="color"]::-moz-color-swatch{
  border: 0;
  border-radius: 5px;
}

/* HEX入力 */
.left-column .setting-content .color-picker-control input[type="text"]{
  width: 100%;
  margin: 0;
}

/* 透明度設定1項目 */
.left-column .range-setting-row{
  margin-bottom: 10px;
}

/* スライダー・数値・%を横並び */
.left-column .range-number-control{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px auto;
  align-items: center;
  gap: 8px;
}

/* 透明度スライダー */
.left-column .setting-content .range-number-control input[type="range"]{
  width: 100%;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  accent-color: var(--generator-primary);
  cursor: pointer;
  box-shadow: none;
}

/* 透明度の数値欄 */
.left-column .setting-content .range-number-control input[type="number"]{
  width: 58px;
  padding: 7px 6px;
  margin: 0;
  text-align: right;
}

/* %表示 */
.left-column .range-number-control > span{
  color: color-mix(in oklab, var(--generator-foreground) 70%, transparent);
  font-size: 12px;
}

/* 透明度説明文は少し詰める */
.left-column .range-setting-row > .setting-description{
  margin: 6px 0 0;
  font-size: 11px;
}

/* tweakcnテーマの細部反映 */
.tip-generator[data-generator-theme] .center-area .section-title,
.tip-generator[data-generator-theme] .output-title{
  color: var(--generator-foreground);
  text-shadow: none;
}

.tip-generator[data-generator-theme] .tip-start-btn .button-text,
.tip-generator[data-generator-theme] .tip-start-btn .button-background,
.tip-generator[data-generator-theme] .tip-start-btn .button-color,
.tip-generator[data-generator-theme] .tip-start-btn .button-radius{
  color: var(--generator-foreground);
}

.tip-generator[data-generator-theme] .embed-mode-help{
  color: color-mix(in oklab, var(--generator-foreground) 60%, transparent);
}

.tip-generator[data-generator-theme] .left-column .setting-content input:focus,
.tip-generator[data-generator-theme] .left-column .setting-content textarea:focus,
.tip-generator[data-generator-theme] .tip-start-btn input:focus,
.tip-generator[data-generator-theme] .custom-trigger-field input:focus,
.tip-generator[data-generator-theme] .outputText:focus{
  border-color: var(--generator-primary);
  box-shadow: 0 0 0 2px color-mix(
    in oklab,
    var(--generator-primary) 18%,
    transparent
  );
}

/* =========================================================
   tweakcnテーマ選択
========================================================= */

.tip-generator[data-generator-theme] .generator-theme-control{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 「テーマ」の文字 */
.tip-generator[data-generator-theme] .generator-theme-label{
  color: color-mix(in oklab, var(--generator-foreground) 70%, transparent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* テーマ選択全体 */
.tip-generator[data-generator-theme] .generator-theme-picker{
  position: relative;
}

/* 現在選択中のテーマ */
.tip-generator[data-generator-theme] .generator-theme-button{
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--generator-border);
  border-radius: 9px;
  background-color: var(--generator-card);
  color: var(--generator-foreground);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* 選択中テーマの4色見本 */
.generator-theme-swatches{
  display: flex;
  align-items: center;
  gap: 3px;
}

.tip-generator[data-generator-theme] .generator-theme-swatch{
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in oklab, var(--generator-foreground) 22%, transparent);
  border-radius: 50%;
}

/* テーマ名 */
.tip-generator[data-generator-theme] .generator-theme-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 下向き矢印 */
.tip-generator[data-generator-theme] .generator-theme-arrow{
  color: color-mix(in oklab, var(--generator-foreground) 60%, transparent);
  font-size: 11px;
}

/* hover */
.tip-generator[data-generator-theme] .generator-theme-button:hover{
  border-color: var(--generator-primary);
  background-color: var(--generator-card);
  color: var(--generator-foreground);
}

/* 開いている時 */
.tip-generator[data-generator-theme] .generator-theme-button[aria-expanded="true"]{
  border-color: var(--generator-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--generator-ring) 18%, transparent);
}

/* Light / Dark切り替え */
.tip-generator[data-generator-theme] .generator-theme-mode-button{
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--generator-border);
  border-radius: 9px;
  background-color: var(--generator-card);
  color: var(--generator-foreground);
  font-size: 16px;
  cursor: pointer;
}

.tip-generator[data-generator-theme] .generator-theme-mode-button:hover{
  border-color: var(--generator-primary);
  background-color: var(--generator-card);
  color: var(--generator-primary);
}

/* テーマ一覧 */
.tip-generator[data-generator-theme] .generator-theme-menu{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  width: 250px;
  max-height: 360px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--generator-border);
  border-radius: 10px;
  background-color: var(--generator-card);
  box-shadow: 0 12px 28px color-mix(in oklab, #000 28%, transparent);
}

/* hidden時 */
.tip-generator[data-generator-theme] .generator-theme-menu[hidden]{
  display: none !important;
}

/* テーマ1件 */
.tip-generator[data-generator-theme] .generator-theme-option{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background-color: transparent;
  color: var(--generator-foreground);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* 一覧側の4色見本 */
.generator-theme-option-swatches{
  display: flex;
  align-items: center;
  gap: 3px;
}

.tip-generator[data-generator-theme] .generator-theme-option-swatch{
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in oklab, var(--generator-foreground) 22%, transparent);
  border-radius: 50%;
}

/* テーマ名 */
.tip-generator[data-generator-theme] .generator-theme-option-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* hover */
.tip-generator[data-generator-theme] .generator-theme-option:hover{
  background-color: var(--generator-muted);
  color: var(--generator-foreground);
}

/* 選択中 */
.tip-generator[data-generator-theme] .generator-theme-option.is-selected{
  background-color: color-mix(in oklab, var(--generator-primary) 12%, var(--generator-card));
  color: var(--generator-primary);
}

/* テーマ一覧のスクロールバー */
.tip-generator[data-generator-theme] .generator-theme-menu::-webkit-scrollbar{
  width: 7px;
}

.tip-generator[data-generator-theme] .generator-theme-menu::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background-color: var(--generator-border);
}

/* =========================================================
   ジェネレーター本体のスマホ対応
========================================================= */

@media (max-width: 767px){

  /*ページ全体*/
  .tip-generator{
    padding: 12px;
    overflow-x: hidden;
  }

  /*スマホの上部メニューを縦並びにする*/
  .top-menu{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
  }

  .generator-brand{
    align-self: flex-start;
    margin-right: 0;
  }

  /*スマホではテーマ切替の下に使い方を配置*/
  .generator-header-actions{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /*スマホのテーマ選択*/
  .generator-theme-control{
    max-width: 100%;
  }

  .generator-theme-picker{
    min-width: 0;
  }

  .tip-generator[data-generator-theme] .generator-theme-button{
    min-width: 180px;
  }

  .tip-generator[data-generator-theme] .generator-theme-menu{
    width: min(250px, calc(100vw - 24px));
  }

  /*ページ本体を縦並びにする*/
  .tip-generator .generator-main{
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  /*設定欄*/
  .generator-main .left-column{
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  /*プレビュー・出力側*/
  .generator-main .main-column{
    width: 100%;
    min-width: 0;
  }

  /*設定項目*/
  .left-column .settings-group{
    width: 100%;
  }

  /*3シーン切り替え*/
  .preview-tabs{
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  /*プレビュー領域*/
  .generator-widget-preview{
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  /*実ウィジェットのプレビュー*/
  .generator-widget-preview .tipWidget{
    width: 100%;
    min-width: 0;
  }

  /*プレビューモーダル*/
  .generator-widget-preview .tipWidget .tipModal{
    width: 100% !important;
    max-width: 100% !important;
  }

  /*設定情報・埋め込みコードを縦並びにする*/
  .output-panels{
    flex-direction: column;
    gap: 16px;
  }

  /*出力欄*/
  .json-output,
  .embed-output{
    width: 100%;
    min-width: 0;
  }

    /*埋め込み方式*/
  .tip-generator .embed-mode-options{
    flex-direction: column;
    gap: 8px;
  }

  /*スマホでは左・右配置も縦並びにして操作領域を確保する*/
  .generator-widget-preview .tipWidget .tipLayout[data-has-chara="true"][data-visual-position="left"],
  .generator-widget-preview .tipWidget .tipLayout[data-has-chara="true"][data-visual-position="right"]{
    grid-template-columns: minmax(0, 1fr);
  }

  /*左配置：キャラ→メッセージ→操作内容*/
  .generator-widget-preview .tipWidget .tipLayout[data-has-chara="true"][data-visual-position="left"]{
    grid-template-areas:
      "chara"
      "speech"
      "content";
  }

  /*右配置：操作内容→キャラ→メッセージ*/
  .generator-widget-preview .tipWidget .tipLayout[data-has-chara="true"][data-visual-position="right"]{
    grid-template-areas:
      "content"
      "chara"
      "speech";
  }

  /*キャラなしの左配置も1列化*/
  .generator-widget-preview .tipWidget .tipLayout[data-has-chara="false"][data-visual-position="left"]{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "speech"
      "content";
  }

  /*キャラなしの右配置も1列化*/
  .generator-widget-preview .tipWidget .tipLayout[data-has-chara="false"][data-visual-position="right"]{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "speech";
  }

  /*キャラ素材がプレビュー幅からはみ出さないようにする*/
  .generator-widget-preview .tipCharaVid,
  .generator-widget-preview .tipCharaImg{
    max-width: 100%;
    height: auto;
  }

  /*長いファイル名・アドレスなどの横はみ出し防止*/
  .generator-widget-preview .tipModal,
  .generator-widget-preview .tipSpeech,
  .generator-widget-preview .btnParts,
  .generator-widget-preview .tipConfirm,
  .generator-widget-preview .tipBusy,
  .generator-widget-preview .tipResult{
    min-width: 0;
    max-width: 100%;
  }

  /*スマホではプレビュー操作列を折り返す*/
  .preview-toolbar{
    flex-wrap: wrap;
  }

  /*3シーン切替を1行目いっぱいにする*/
  .preview-toolbar .preview-main-tabs{
    flex: 1 1 100%;
  }

  /*プレビュー表示切替を2行目へ置く*/
  .preview-toolbar .preview-btn{
    width: 100%;
  }

/*下書き操作はスマホでも3列を維持する*/
.generator-local-actions{
  position: static;
  top: auto;
  z-index: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 0;
  background: transparent;
}

  /*出力ボタンが狭い画面からはみ出さないようにする*/
  .output-head{
    flex-wrap: wrap;
  }
}