/* Prompt Studio Code v3 - Professional Dark Theme */
:root {
    --bg-main: #1e1e1e;
    --bg-sidebar: #252526;
    --bg-header: #333333;
    --bg-input: #3c3c3c;
    --text-main: #cccccc;
    --text-bright: #ffffff;
    --accent: #007acc;
    --accent-hover: #118ad1;
    --border: #444444;
    
    /* カテゴリ別のアクセントカラー（解析用） */
    --color-head: #9cdcfe;
    --color-body: #ce9178;
    --color-fashion: #4ec9b0;
    --color-scene: #b5cea8;
    --color-action: #dcdcaa;
    --color-nsfw: #f44747;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* --- アプリ全体のカスタムスクロールバー --- */

/* 1. Webkit系 (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;  /* 縦スクロールバーの幅 */
    height: 10px; /* 横スクロールバーの高さ */
}

/* スクロールバーの背景（レール） */
::-webkit-scrollbar-track {
    background: var(--bg-sidebar); 
}

/* スクロールバーの動く部分（つまみ） */
::-webkit-scrollbar-thumb {
    background: #424242; /* VSCode標準に近いグレー */
    border-radius: 5px;
    border: 2px solid var(--bg-sidebar); /* レールとの間に隙間を作って細く見せる */
}

/* ホバー時（マウスを載せた時） */
::-webkit-scrollbar-thumb:hover {
    background: #4f4f4f;
}

/* 2. Firefox用 (標準プロパティ) */
* {
    scrollbar-width: thin; /* 細くする */
    scrollbar-color: #424242 var(--bg-sidebar); /* つまみ色 背景色 */
}

/* --- サイドバー内のスクロールエリアを微調整 --- */
.palette-scroll-area, 
.inspector-container, 
.mini-chip-container,
.editor-area {
    /* スクロールバーが常に表示されてガタつくのを防ぐ（必要な時だけ出す） */
    overflow-y: auto;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Segoe UI', system-ui, sans-serif;
    height: 100vh;
    overflow: hidden;
}

.ide-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* --- サイドバー構成 --- */
.sidebar {
    width: 20%;
    min-width: 260px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.sidebar-section {
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    max-height: 40%; /* セクションごとの最大高さ */
}

.section-header {
    padding: 8px 12px;
    background: #333;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 1. プロンプト・インスペクター (解析表示) */
.inspector-container {
    padding: 10px;
    overflow-y: auto;
    background: #1e1e1e;
}

.inspector-group {
    margin-bottom: 12px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.inspector-group.has-tags {
    opacity: 1;
}

.group-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: bold;
    color: #666;
    margin-bottom: 4px;
}

.group-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mini-tag {
    background: #2d2d2d;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    color: #aaa;
    border: 1px solid #333;
}

/* 2. クイックパレット (ハッシュタグ) */
.hashtag-cloud {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-y: auto;
}

.hashtag-item {
    background: #2d2d2d;
    color: var(--accent-hover);
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid #444;
    transition: all 0.2s;
}

.hashtag-item:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* 3. 保存済み & ゴミ箱 (チップ形式) */
.mini-chip-container {
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.trash-chip {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #777;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: pointer;
}

.trash-chip:hover {
    border-color: var(--accent);
    color: var(--text-main);
}

/* --- メインワークスペース --- */
.main-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.workspace-header {
    height: 35px;
    background-color: var(--bg-header);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    font-size: 0.75rem;
}

/* --- エディタブロック --- */
.editor-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.editor-block {
    background: #2d2d2d;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 20px;
}

.active-block {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent);
}

.block-header {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: #37373d;
    font-size: 0.75rem;
    color: #aaa;
}

.active-block .block-header {
    background: #094771 !important;
    color: white;
}

.block-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

/* --- タグチップ & 入力 --- */
.tag-container {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 60px;
}

.tag-chip {
    padding: 4px 6px 4px 12px;
    border-radius: 6px;
    border: 1px solid #444;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #333;
    cursor: grab;
}

.tag-chip.source-manual { background: #2d3e2d; border-color: #3e5e3e; }

.remove-btn {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.2);
    color: white;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
}

.remove-btn:hover { background: #ef4444; }

.inline-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    padding: 4px;
    min-width: 120px;
    flex: 1;
}

/* --- サジェスト補完 --- */
.suggest-container {
    position: absolute;
    background: #252526;
    border: 1px solid #454545;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 2000;
    min-width: 250px;
    border-radius: 4px;
}

.suggest-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.suggest-item.selected { background: #094771; }

.suggest-tag { color: #9cdcfe; font-weight: bold; }
.suggest-score { color: #ffd700; font-size: 0.7rem; margin-left: 8px; }

/* --- 出力エリア --- */
.output-area {
    height: 250px;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.output-rich-display {
    padding: 15px;
    font-family: 'Cascadia Code', 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4ec9b0;
    overflow-y: auto;
}

.tag-span.highlighted {
    background-color: rgba(255, 215, 0, 0.15);
    border-bottom: 2px solid #ffd700;
}

.empty-btn { background: none; border: none; color: #555; cursor: pointer; font-size: 0.6rem; }
.empty-btn:hover { color: #ef4444; }

.hidden { display: none; }


/* サブエリア追加ボタン */
.add-area-zone { padding: 20px 0; text-align: center; }
.add-btn {
    background: #333; color: #aaa; border: 1px dashed #555;
    padding: 10px 40px; border-radius: 4px; cursor: pointer; transition: 0.2s;
}
.add-btn:hover { background: #444; color: white; border-color: var(--accent); }

/* 出力エリア (30%) */
.output-area {
    height: 30%;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.output-header {
    padding: 8px 15px;
    background: #252526;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.terminal-title { font-size: 0.75rem; font-weight: bold; }

.action-btn {
    background: none; border: none; color: #aaa; cursor: pointer;
    font-size: 0.8rem; margin-left: 15px;
}
.action-btn:hover { color: white; }

.output-content { flex-grow: 1; padding: 10px; }
.output-content textarea {
    width: 100%; height: 100%; background: none; border: none;
    color: #4ec9b0; /* VSCode っぽい緑 */
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem; resize: none; outline: none;
}

.block-actions button {
    background: none; border: none; color: #666; font-size: 0.7rem; cursor: pointer; margin-left: 10px;
}
.block-actions button:hover { color: #fff; }

/* パレット全体のスクロール領域 */
.palette-section {
    flex: 1; /* 残りのスペースをすべて使う */
    min-height: 0; /* flex内のスクロールを有効にするためのハック */
}

.palette-scroll-area {
    overflow-y: auto;
    padding: 10px;
    background: #1e1e1e;
}

.palette-group-box {
    margin-bottom: 20px;
    border-bottom: 1px solid #2d2d2d;
    padding-bottom: 10px;
}

.palette-group-title {
    font-size: 0.75rem;
    color: var(--accent-hover);
    margin-bottom: 5px;
    padding-left: 5px;
    border-left: 3px solid var(--accent);
}

/* AdSense対策のテキスト（ユーザーには目立たせず、ボットには読ませる） */
.seo-text {
    font-size: 0.65rem;
    color: #555;
    margin-bottom: 8px;
    padding-left: 5px;
}

/* ハッシュタグのサイズを少しコンパクトに */
.hashtag-item {
    background: #2a2a2a;
    color: #9cdcfe;
    padding: 2px 6px;
    margin-bottom: 4px;
    font-size: 0.7rem; /* 少し小さくして密度を上げる */
}

/* インスペクター内のタグを clickable に */
.inspector-clickable-tag {
    cursor: pointer;
    transition: all 0.2s;
}

.inspector-clickable-tag:hover {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent-hover) !important;
}

/* エディタ側：フォーカス時の強調アニメーション */
.tag-chip.focus-highlight {
    border-color: #ffd700 !important; /* 金色 */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    transform: scale(1.1); /* 少し大きく */
    z-index: 100;
    transition: all 0.3s ease;
}

/* 編集エリアのチップにツールチップを追加 */
.tag-chip {
    position: relative;
}

.tag-chip::after {
    content: attr(data-ja); /* data-ja属性を表示 */
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.tag-chip:hover::after {
    if (attr(data-ja) !== "") { /* 日本語がある場合のみ表示 */
        opacity: 1;
        visibility: visible;
    }
}

/* --- タグチップ & 入力エリアの調整 --- */
.tag-container {
    padding: 12px;
    display: flex;      /* 親をフレックスに */
    flex-wrap: wrap;    /* 折り返し許可 */
    gap: 8px;
    align-items: center;
    min-height: 60px;
}

/* チップが並ぶエリア自体もフレックスにする */
.tag-list-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* bodyとinputをシームレスに繋げるために display: contents を使うのも手ですが、
       SortableJSとの相性を考え、通常のフレックスで定義します */
}

.tag-chip {
    /* 既存のスタイルを維持 */
    white-space: nowrap; /* タグ内での改行を防止 */
}

/* --- インライン編集用 input のデザイン --- */
.edit-inline-input {
    background: var(--bg-input); /* 入力欄と同じ背景色 */
    color: var(--text-bright);
    border: 1px solid var(--accent); /* VSCode ブルーの細い枠 */
    border-radius: 3px;
    padding: 2px 4px;
    font-size: inherit;     /* チップの文字サイズを継承 */
    font-family: inherit;
    outline: none;
    width: auto;            /* 文字数に合わせて調整したい場合は JS で制御 */
    min-width: 50px;
    box-shadow: 0 0 5px rgba(0, 122, 204, 0.5); /* ほんのり光らせる */
    
    /* チップの padding を考慮して位置を微調整 */
    margin: -2px 0; 
}

/* 編集中のチップ自体のスタイル調整（必要なら） */
.tag-chip:has(.edit-inline-input) {
    background: #2a2d2e !important; /* 編集中の背景を少し暗く */
    border-color: var(--accent);
}

.inline-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    padding: 4px;
    min-width: 150px; /* 少し広めに確保 */
    flex: 1;          /* 余ったスペースを埋める */
}

/* ドラッグ中の要素が勝手に広がったり縮んだりするのを防ぐ */
.sortable-ghost {
    opacity: 0.4;
    background: var(--accent) !important;
}

/* ドラッグ中に周りの要素がガタつかないようにする */
.sortable-chosen {
    cursor: grabbing;
}

.suggest-item {
    border-bottom: 1px solid #333;
    transition: background 0.1s;
}

.suggest-tag {
    color: #9cdcfe; /* デフォルト色 */
}

.suggest-tag b {
    color: #ffffff; /* ハイライト色 */
    text-decoration: underline;
}

.suggest-ja {
    font-size: 0.7rem;
    color: #888;
}

.suggest-cat {
    font-size: 0.6rem;
    color: #555;
    text-transform: uppercase;
}