/* ===============================
   AIモード全体ラッパー
   =============================== */
.folder-tab {
  background-color: #ffc107;
}

.folder-body {
  background-color: #ffca28;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2);
}

.language-select-btn,
.settingTab-Select-Btn {
  border-width: 1px;
  border-style: solid;
  border-color: #cbd7cce5;
  background-color: #cbd7ccb7;
}

.language-select-btn:hover {
  background: #cbd7ccf0;
}


.plus-Editor-Btn,
.auto-width-Btn,
.AI-editmode,
.AI-proofread-Btn,
.copy-editor-Btn,
.edit-add-folder,
.preview-add-folder,
.delete-Editor-Btn,
.preview-comment,
.insert-editor,
.resultarea-Btn,
.reference-Btn,
.searchLabelMatchBtn,
.preview-setBtn,
.search-TargetBtn,
.editMode-cmdBtn,
.editMode-delete-cmdBtn,
.label-changeBtn,
.fontSize-changeBtn,
.CandD-menuBtn,
.search-PanelBtn,
.search-TargetBtn {
  color: #f6d3eb;
  background-color: #000601af;
}

/* デフォルト */
#resultpagebackBtn,
#resultpageNextBtn {
  cursor: pointer;
}

/* disabled時 */
#resultpagebackBtn:disabled,
#resultpageNextBtn:disabled,
#lockPreviewBtn:disabled {
  color: #555555;           /* トーンダウン */
  cursor: default;     /* ポインターも戻す */
}

/* disabled時 */
#resultpagebackBtn:disabled:hover,
#resultpageNextBtn:disabled:hover,
#lockPreviewBtn:disabled:hover {
  background-color: #0006018b;
}


.preview-setBtn:hover,
.searchLabelMatchBtn:hover,
.insert-editor:hover,
.preview-add-folder:hover,
.preview-comment:hover,
.back-editor:hover,
.next-editor:hover,
.AI-editode:hover,
.plus-Editor-Btn:hover,
.delete-Editor-Btn:hover,
.auto-width-Btn:hover,
.edit-add-folder:hover,
.AI-proofread-Btn:hover,
.copy-editor-Btn:hover,
.resultarea-Btn:hover,
.reference-Btn:hover,
.editMode-cmdBtn:hover,
.editMode-delete-cmdBtn:hover,
.label-changeBtn:hover,
.fontSize-changeBtn:hover,
.CandD-menuBtn:hover,
.search-PanelBtn:hover,
.search-TargetBtn:hover {
  background-color: #000601cf;
}


.text-changetn {
  display: block;          /* ボタンをブロック表示に */
  width: 100%;             /* 親幅いっぱいに */
  white-space: pre-wrap;   /* 折り返しあり（空白・インデントも保持） */
  overflow-wrap: break-word; /* 長い単語も折り返す */
  margin: 4px 0;           /* 上下の余白 */
  padding: 6px 8px;
  border-radius: 6px;
  font-family: monospace;  /* コード風フォント */
  text-align: left;        /* 左寄せ */
  box-sizing: border-box;  /* パディング込みで幅調整 */
  font-size: 14px;
  line-height: 1.5;
  background-color: #032409d5;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.text-changetn:hover {
  background-color: #6198c4bb;
}

.line-wrapper {
  padding: 8px;
  background-color: #9a31a085;
}

.text-changetn-input {
  color: white;
  background-color: #9a31a000;
  width: 100%;
  min-height: 24px; /* 最小高さ */
  max-height: 160px; /* 最大高さ */
  overflow: hidden; /* 自動拡張のためスクロールを隠す */
  resize: none; /* ユーザーによる手動リサイズ無効化 */
  box-sizing: border-box;
  font-family: monospace;
  padding: 6px 8px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.text-changetn-btnGroup {
  width: 100%;
  height: 2.6rem;
  padding: 8px;
}

.text-changetn-btn {
  height: 32px;
  width: 88px;
  padding: 0;
  font-size: 14px;
  border: none;
  border-radius: 50px;
  background-color: #032409d5;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.text-changetn-btn:hover {
  background-color: #444;
}

.slider-container {
  position: absolute;
  top: 5px;      /* スライダーの上に表示 */
  left: 10;  
  width: 200px; /* スライダー幅 */
  background-color: #9a31a085;
  color: #f6d3eb;
  z-index: 9999;
}

#tempSlider {
  width: 100%;
}

#tempValue {    /* 右端に寄せる */
  font-size: 0.8em;
  color: #f6d3eb;
}
/* ===============================
   各質問ブロック
   =============================== */


.reference-cancelBtn,
.reference-registrationBtn,
.reference-Btm,
.display-backBtn {
  position: absolute;
  top: 50%;
  left: 1.2rem;
  transform: translateY(-50%);
  width: 7rem;
  height: 2rem;
  font-size: 12px;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  color: #f6d3eb;
  background-color: #9a31a085;
  box-shadow: 10px 10px 10px #053a0aa5;
}


.reference-note-btn {
  left: 9.4rem;
}

.reference-cancelBtn,
.display-backBtn {
  left: 9.4rem;
  display: none;
}

.reference-registrationBtn {
  left: 16.8rem;
  display: none;
}


.reference-cancelBtn:hover,
.reference-registrationBtn:hover,
.display-backBtn:hover {
  background: #5e6ba47f;
}

.chat-ai-header {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  color: #fff;     /* 緑文字 */
  margin-top: 10px;   /* 下のpreとの間隔 */
}

.chat-code {
  width: 100%;         /* 親幅いっぱい */
  overflow-x: auto;
  border: 0.1px solid #c2ac538b;
  border-radius: 8px;
}

.chat-code .CodeMirror {
  min-height: 80px;
}

.chat-code-header {
  background-color: #10541c7d;
  color: #fff;
  padding: 4px 8px;
  font-family: monospace;
  border-bottom: 0.1px solid #c2ac538b;
}

.chat-code pre {
  display: block;       /* これが標準 */
  white-space: pre;    /* 折り返さずにそのまま表示 */
  margin: 0;
  padding: 8px;
  background-color: #032409;
  color: #fff;
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  min-width: max-content; /* ←重要: 内容幅に合わせる */
}

.ai-mode-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;              /* 画面幅に固定 */
  min-width: 0;
  height: 100%;             /* 画面高さに固定 */
  display: flex;
  flex-direction: column; 
  /*background-color: #032409;*/
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;    
  z-index: 0;
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  backdrop-filter: blur(6px);
  border: 0.01px solid #f6d3eb;
}

#aiOutput {
  flex: 1;
  width: 100%;       /* 親要素の幅を100%に */
  max-width: 100%;
  padding: 8px;
  overflow-y: auto;
  background-color: rgba(32, 32, 32, 0.767);
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}

.chat-user {
  width: auto;
  display: inline-block;
  text-align: left;
  right: 0;
  margin: 4px 0;
  /*
  background-color: #673d6aca;*/
  background-color: #1a789bca;
  padding: 6px 10px;
  border-radius: 12px;
  white-space: pre-wrap;     /* 改行と折り返しを有効 */
  overflow-wrap: break-word;
  overflow: visible;
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}

.chat-ai {
  width: auto;
  min-width: 0%;
  text-align: left;
  position: relative;
  margin: 8px 0;
  /*background-color: #032409ca;
  padding: 10px 10px;
  padding-bottom: 58px;
  border-radius: 12px;*/
  white-space: pre-wrap;     /* 改行と折り返しを有効 */
  overflow-wrap: break-word;
  overflow: visible;
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}

.chat-js {
  width: auto;
  min-width: 0%;
  text-align: left;
  position: relative;
  margin: 8px 0;
  background-color: #032409ca;
  padding: 6px 10px;
  border-radius: 12px;
  white-space: pre-wrap;     /* 改行と折り返しを有効 */
  overflow-wrap: break-word;
  overflow: visible;
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}

.chat-ai pre {
  white-space: pre-wrap;       /* 改行を維持しつつ折り返し */
  word-break: break-word;      /* 長い単語も折り返す */
  overflow-wrap: anywhere;     /* 任意の場所で折り返す */
  display: block;              /* ブロック化 */
  width: 100%;                 /* 親に収まる */
  box-sizing: border-box;      /* padding を含める */
  padding-bottom: 58px;

  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}

/* 下部の入力欄コンテナ */
.aimode-user-container {
  display: flex;
  padding: 8px;
  gap: 8px;
  background-color: #43434399;
  border-top: 1px solid #ccc;
  height: 68px;
}

/* 入力欄（テキストエリア） */
.user-input {
  flex: 1;

  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  line-height: 21px;          /* 行高さ（ここをUI基準に合わせてください） */
  padding: 0.26rem 1rem 0.26rem 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: none; /* 高さ変更禁止 */
  position: relative;
  height: 32px;

/* 
  height: calc(1.4em + 8px);
  min-height: calc(1.4em + 14px);
  max-height: calc(1.4em * 5 + 14px);
*/
}

/* 送信ボタン */
#userAddAiBtn {
  height: 32px;
  width: 32px;
  padding: 6px 12px;
  font-size: 14px;
  border: none;
  border-radius: 50px;
  background-color: #1f1f1fd5;
  border: #a8a8a8d5;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

#userAddAiBtn:hover {
  background-color: #14a832d5;
}

.reference-change-btn,
.reference-CodeOnly-btn,
.prompt-review-btn {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 50px;
  background-color: #444;
  color: #fff;
  cursor: pointer;
}

.reference-CodeOnly-btn {
  left: 220px;
}

.reference-change-btn:hover,
.reference-CodeOnly-btn:hover,
.prompt-review-btn:hover {
  background-color: #666;
}

.AIchat-yes-btn,
.AIchat-no-btn {
  position: absolute;
  width: 96px;
  bottom: 10px;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 50px;
  background-color: #444;
  color: #fff;
  cursor: pointer;
}

.AIchat-yes-btn{
  left: 10px;
}

.AIchat-no-btn {
  left: 120px;
}

.choice-btn:hover {
  background-color: #007bff;
  color: #fff;
}

.choice-btn:focus {
  background-color: #007bff;
  color: #fff;
}

.choice-btn.selected {
  background-color: #007bff; /* hover と同じ色 */
  color: #fff;
}

.prompt-editor {
  position: absolute;
  top: 1.7rem;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: calc(100% - 1.7rem);
  padding: 8px 10px 10px 10px;
  font-family: monospace;
  line-height: 1.6;
  resize: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-y: auto;
  box-sizing: border-box;
  z-index: 0;
  border: none;
  color: #c5e6cb;
  outline: none;          /* 青い枠を消す */
  box-shadow: none;
}

#promptEditor,
#aiExplanation {
  /*border: 0.1px solid #f6d3eb;*/
  border-top: none;
  outline: none;          /* 青い枠を消す */
  box-shadow: none;
}

#promptEditorLabel,
#descriptionEditorLabel {
  border-bottom: none;
  height: 2.2rem;
  font-size: 13px; /* 上のエディタだけ */
  font-family: 
    'Hiragino Kaku Gothic Pro', 
    'Helvetica Neue', 
    Arial, 
    sans-serif;
  letter-spacing: 0.02em;

}

#promptEditor {
  overflow-y: auto;
}

#promptEditorLabel {
  position: absolute;
  z-index: 1;
}

.prompt-editor-label {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 1.7rem;
  max-height: 1.7rem;
  padding: 0px 10px;
  z-index: 0; /* textarea より前面 */
  pointer-events: none; /* textarea 操作を邪魔しない */
  color: #c2ac53;
}

.ai-description {
  position: absolute;
  top: 1.7rem;
  left: 0;
  width: 100%;
  height: calc(100% - 1.7rem);
  padding: 8px 10px 10px 10px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-y: auto;
  z-index: 0;
  border: none;
  outline: none;          /* 青い枠を消す */
  box-shadow: none;
  resize: none;
}

.description-editor-label {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  font-size: 14px;
  height: 1.7rem;
  max-height: 1.7rem;
  padding: 0px 10px;
  z-index: 0; /* textarea より前面 */
  pointer-events: none;
}

#aiDescription,
#promptEditor,
#aiExplanation {
  font-size: 14px; /* 上のエディタだけ */
  font-family: 
    'Hiragino Kaku Gothic Pro', 
    'Helvetica Neue', 
    Arial, 
    sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.7;
}


.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fade-in.show {
  opacity: 1;
}


.preview-editArea-label {
  padding: 0px 33px;
}

body.theme-haru .prompt-editor,
body.theme-haru .ai-description {
  background: linear-gradient(to right, #d8cfd8f6, #d8cfd8f5, #d8cfd8d3, #d8cfd8f5);
  color: #1d1d1d;
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
}

body.theme-haru .editModeTag {
  background: linear-gradient(to right, #884888f6, #884888f5, #884888d3, #884888f5);
  color: #1d1d1d;
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
}

body.theme-haru .settings-contentBtn,
body.theme-haru .fileContainerLangtab-btn {
  background: linear-gradient(to right, #884888f6, #884888f5, #884888d3, #884888f5);
  color: #cdd6cf;
  border-top: 0.1px solid #f6d3eb;
}


body.theme-haru .ai-description {
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
  border-bottom: 0.1px solid #f6d3eb;
}

body.theme-natsu .editModeTag,
body.theme-natsu .prompt-editor,
body.theme-natsu .ai-description {
  background: linear-gradient(to right, #031e08f6, #031e08f5, #031e08d3, #031e08f5);
  color: #cdd6cf;
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
}


body.theme-natsu .settings-contentBtn,
body.theme-natsu .fileContainerLangtab-btn {
  background: linear-gradient(to right, #265b30f6, #265b30f5, #265b30d3, #265b30f5);
  color: #cdd6cf;
  border-top: 0.1px solid #f6d3eb;
}



body.theme-natsu .ai-description {
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
  border-bottom: 0.1px solid #f6d3eb;
}

body.theme-aki .editModeTag,
body.theme-aki .prompt-editor,
body.theme-aki .ai-description {
  background: linear-gradient(to right, #1e0303f6, #1e0303f5, #1e0303d3, #1e0303f5);
  color: #d6caca;
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
}


body.theme-aki .settings-contentBtn,
body.theme-aki .fileContainerLangtab-btn {
  background: linear-gradient(to right, #842929f6, #842929f5, #842929d3, #842929f5);
  color: #d6caca;
  border-top: 0.1px solid #f6d3eb;
}


body.theme-aki .ai-description {
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
  border-bottom: 0.1px solid #f6d3eb;
}


body.theme-fuyu .prompt-editor,
body.theme-fuyu .ai-description {
  background: linear-gradient(to right, #cbd8e0f6, #cbd8e0f5, #cbd8e0d3, #cbd8e0f5);
  color: #1d1d1d;
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
}

body.theme-fuyu .editModeTag {
  background: linear-gradient(to right, #516679f6, #516679f5, #516679d3, #516679f5);
  color: #1d1d1d;
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
}

body.theme-fuyu .settings-contentBtn,
body.theme-fuyu .fileContainerLangtab-btn {
  background: linear-gradient(to right, #516679f6, #516679f5, #516679d3, #516679f5);
  color: #cdd6cf;
  border-top: 0.1px solid #f6d3eb;
}


body.theme-fuyu .ai-description {
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
  border-bottom: 0.1px solid #f6d3eb;
}



body.theme-haru .prompt-editor-label,
body.theme-haru .description-editor-label {
  background: linear-gradient(to right, #975b98, #d8cfd8);
  border: 0.1px solid #975b98;
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
  color: #d8cfd8;
}


body.theme-haru .preview-editArea-label,
body.theme-haru .editArea-label {
  background: linear-gradient(to right, #975b98, #d8cfd8 34px, #d8cfd8 100%);
  border-bottom: 0.1px solid #975b9850;

  color: #975b9899;
}


body.theme-natsu .prompt-editor-label,
body.theme-natsu .description-editor-label {
  background: linear-gradient(to right, #ffcccc, #031e08);
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
  color: #031e08;
}


body.theme-natsu .preview-editArea-label,
body.theme-natsu .editArea-label {
  background: linear-gradient(to right, #295629, #031e08 34px, #031e08 100%);
  border-bottom: 0.1px solid #29562950;

  color: #cdd6cf99;
}


body.theme-aki .prompt-editor-label,
body.theme-aki .description-editor-label {
  background: linear-gradient(to right, #e28787, #1e0303);
  border: 0.1px solid #e28787;
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
  color: #1e0303;
}


body.theme-aki .preview-editArea-label,
body.theme-aki .editArea-label {
  background: linear-gradient(to right, #e28787, #1e0303 34px, #1e0303 100%);
  border-bottom: 0.1px solid #e2878750;

  color: #e2878799;
}


body.theme-fuyu .prompt-editor-label,
body.theme-fuyu .description-editor-label {
  background: linear-gradient(to right, #516679, #d9e2e8);
  border: 0.1px solid #516679;
  border-left: 0.1px solid #f6d3eb;
  border-right: 0.1px solid #f6d3eb;
  color: #d9e2e8;
}


body.theme-fuyu .preview-editArea-label,
body.theme-fuyu .editArea-label {
  background: linear-gradient(to right, #516679, #d9e2e8 34px, #d9e2e8 100%);
  border-bottom: 0.1px solid #51667950;

  color: #3f709b99;
}













/* 元設定ファイル *********************************************************/
/* 設定用コンテナ 基本 */

.setting-title-container{
  display: flex;
  height: 10%;
  width: 98%;
  justify-content: center; /* 両端に配置して間を均等にする */
  align-items: center;
  border-radius: 2px;
  margin-bottom: 1rem;
  background-color: #0006018b;
}

.setting-container-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #f6d3eb;
}

.settings-column.left,
.settings-column.right {
  position: absolute;
  flex: 1;
  width: 50%;
  height: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.settings-column.left {
  left: 0;
}
.settings-column.right {
  right: 0;
}

.setting-item {
  height: 20%;
  width: 98%;
  display: flex;
  flex-direction: column;
  background-color: #dfdeda9c;
  border-radius: 2px;
  padding: 1.2rem 0 0 1.7rem;
  margin-bottom: 1rem;
}

.setting-item label {
  margin-bottom: 6px;
  font-weight: 500;
  color: #032406e4;
}

.setting-item input,
.setting-item select {
  width: 80%;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#librarySetting,
#extraSetting,
#otherSettingItem {
  height: 18vh  
}

.librarySetting-tags-container,
.externalAPI-tags-container,
.otherSettingItem-tags-container{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* 各タグ（チップ） */
.librarySetting-tags-container .framework-tag,
.externalAPI-tags-container .framework-tag,
.otherSettingItem-tags-container .framework-tag {
  display: inline-flex;
  align-items: center;
  background-color: #e0e0e0;
  color: #333;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 12px;
  cursor: default;
}

/* 削除ボタン */
.librarySetting-tags-container .framework-tag button,
.externalAPI-tags-container .framework-tag button,
.otherSettingItem-tags-container .framework-tag button {
  margin-left: 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}

/* フレームワークエリア ======================================================== */
#frameworkSetting{
  height: 40vh;
  padding: 0;
}

.frontend-wrapper{
  display: flex;
  flex-direction: column;
  height: 50%;
  width: 100%;
  padding: 1.2rem 0 0 1.7rem;
}
.backend-wrapper{
  display: flex;
  flex-direction: column;
  height: 50%;
  width: 100%;
  padding: 0 0 0 1.7rem;
}

/* 共通タグコンテナ */
.framework-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* 各タグ（チップ） */
.framework-tags-container .framework-tag {
  display: inline-flex;
  align-items: center;
  background-color: #e0e0e0;
  color: #333;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 12px;
  cursor: default;
}

/* 削除ボタン */
.framework-tags-container .framework-tag button {
  margin-left: 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}

/* ボタンエリア ======================================================== */
.setting-btn-item {
  height: 20%;
  width: 98%;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  margin-bottom: 1rem;
}


.settings-actions-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 12px;
}

.setting-Option-Btn {
  flex: 1;
  height: 100%;
  font-size: 12px;
  cursor: pointer;
  border: none;
  color: #f6d3eb;
  background-color: #053a0a85;
}

.setting-Option-Btn:hover {
  background: #6198c4bb;
}

/* tabのアクティブ時の設定 =======================================*/

.setting-tab-container{
  display: flex;
  flex-direction: column;
  min-height: 19%;
  width: 98%;
  padding: 4px;
  box-sizing: border-box;
  background-color: #053a0a8b;
  border-bottom: 2px solid #c8a30fa9;
  margin-bottom: 0.5rem;
}


.setting-category-label {
  font-family: monospace;
  color: #f6d3eb;
  font-size: 14px;
  margin-bottom: 4px;
}

.setting-tab-row {
  display: flex;
  flex-wrap: wrap;       /* タブを自動で折り返す */
  gap: 5px;
  overflow-y: auto;      /* タブが増えたら縦スクロール */
  overflow-x: hidden;
}

.setting-tab {
  display: flex;
  min-width: 90px;
  max-width: 240px;
  white-space: nowrap;
  height: 24px;
  font-family: monospace;
  font-size: 14px;
  border: none;
  padding: 3px 6px;
  margin-bottom: 4px;
  border-radius: 3px;
  overflow: hidden;      /* ここが必要 */
  text-overflow: ellipsis;
  background: #ccc;
  color: #333;
  justify-content: center; /* 両端に配置して間を均等にする */
  align-items: center;
  cursor: pointer;
}

.setting-tab:hover {
  background: #aaa;
}

.setting-tab.active {
  background: #888;
}

.setting-tab.active:hover {
  background: #666;
}

/* アニメーション　====================================================*/
/* ハイライト用の CSS（元の背景色を変数で保持しておく） */
.setting-item {
  --setting-bg: #dfdeda9c; /* 既存の色に合わせておいてください */
  background-color: var(--setting-bg);
  transition: background-color 0.24s ease;
}

/* アニメーション定義 */
@keyframes settingHighlight {
  0%   { background-color: #dfdeda9c; transform: translateY(-2px); }
  40%  { background-color: #053a0a8b; transform: translateY(0); }
  50%  { background-color: #053a0a8b; transform: translateY(0); }
  100% { background-color: var(--setting-bg); transform: translateY(0); }
}


.highlight-error {
  --setting-bg: #dfdeda9c; /* 元の背景色 */
  background-color: var(--setting-bg);
  animation: highlightErrorOnce 1.5s ease-in-out forwards; /* forwardsで最後の状態を保持せず元に戻る */
}

@keyframes highlightErrorOnce {
  0%   { background-color: rgba(223, 141, 141, 0.3); transform: translateY(0); }
  49%  { background-color: var(--setting-bg); transform: translateY(0); }
  50%  { background-color: rgba(223, 141, 141, 0.3); transform: translateY(0); }
  100% { background-color: var(--setting-bg); transform: translateY(0); }
}

/* 点滅用クラス */
.blink {
  animation: blinkAnimation 1.2s infinite;
}

@keyframes blinkAnimation {
  0%, 100% { background-color: #053a0a85; }
  50% { background-color: #ffecb37d; }
}