/* Prompt Alchemy Plugin Styles */

/* ツール全体を80%に縮小表示するためのラッパー */
#pa-wrapper {
    transform: scale(0.8);
    transform-origin: top center;
    width: 100%;
}

/* IDセレクタで全体を囲み、スタイルの影響範囲を限定する */
#pa-prompt-alchemy-container .pa-tab-link.active {
    background-color: #1d4ed8;
    color: white;
    border-color: #1d4ed8;
}
#pa-prompt-alchemy-container .pa-sub-tab-link.active {
    background-color: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
}
#pa-prompt-alchemy-container .pa-grandchild-tab-link.active {
    background-color: #c7d2fe;
    color: #312e81;
    font-weight: 500;
}
#pa-prompt-alchemy-container .pa-tag-btn, 
#pa-prompt-alchemy-container .pa-control-btn, 
#pa-prompt-alchemy-container .pa-preset-btn {
    transition: all 0.2s ease-in-out;
}
#pa-prompt-alchemy-container .pa-tag-btn:hover, 
#pa-prompt-alchemy-container .pa-preset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#pa-prompt-alchemy-container .pa-prompt-tag { cursor: grab; transition: all 0.2s ease; }
#pa-prompt-alchemy-container .pa-prompt-tag:active { cursor: grabbing; }
#pa-prompt-alchemy-container .pa-prompt-tag.selected { background-color: #dbeafe; border-color: #3b82f6; transform: scale(1.02); }
#pa-prompt-alchemy-container .pa-prompt-tag.duplicate { background-color: #fef9c3; border-color: #facc15; }
#pa-prompt-alchemy-container .pa-prompt-tag.duplicate.selected { background-color: #fde68a; }
#pa-prompt-alchemy-container .pa-sortable-ghost { opacity: 0.4; background: #c7d2fe; }
#pa-prompt-alchemy-container .pa-modal-overlay { transition: opacity 0.3s ease; }
#pa-prompt-alchemy-container .pa-modal-content { transition: transform 0.3s ease, opacity 0.3s ease; }

#pa-prompt-alchemy-container #pa-tag-tabs-container::-webkit-scrollbar,
#pa-prompt-alchemy-container #pa-tag-container::-webkit-scrollbar, 
#pa-prompt-alchemy-container #pa-color-grid::-webkit-scrollbar, 
#pa-prompt-alchemy-container #pa-history-list::-webkit-scrollbar, 
#pa-prompt-alchemy-container #pa-preset-container::-webkit-scrollbar { width: 8px; }

#pa-prompt-alchemy-container #pa-tag-tabs-container::-webkit-scrollbar-track,
#pa-prompt-alchemy-container #pa-tag-container::-webkit-scrollbar-track, 
#pa-prompt-alchemy-container #pa-color-grid::-webkit-scrollbar-track, 
#pa-prompt-alchemy-container #pa-history-list::-webkit-scrollbar-track, 
#pa-prompt-alchemy-container #pa-preset-container::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 10px; }

#pa-prompt-alchemy-container #pa-tag-tabs-container::-webkit-scrollbar-thumb,
#pa-prompt-alchemy-container #pa-tag-container::-webkit-scrollbar-thumb, 
#pa-prompt-alchemy-container #pa-color-grid::-webkit-scrollbar-thumb, 
#pa-prompt-alchemy-container #pa-history-list::-webkit-scrollbar-thumb, 
#pa-prompt-alchemy-container #pa-preset-container::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 10px; }

#pa-prompt-alchemy-container #pa-tag-tabs-container::-webkit-scrollbar-thumb:hover,
#pa-prompt-alchemy-container #pa-tag-container::-webkit-scrollbar-thumb:hover, 
#pa-prompt-alchemy-container #pa-color-grid::-webkit-scrollbar-thumb:hover, 
#pa-prompt-alchemy-container #pa-history-list::-webkit-scrollbar-thumb:hover, 
#pa-prompt-alchemy-container #pa-preset-container::-webkit-scrollbar-thumb:hover { background: #6b7280; }

#pa-prompt-alchemy-container .pa-weight-span, 
#pa-prompt-alchemy-container .pa-tag-name-span { cursor: pointer; }
#pa-prompt-alchemy-container .pa-weight-span:hover, 
#pa-prompt-alchemy-container .pa-tag-name-span:hover { text-decoration: underline; }

/* カスタムツールチップ */
#pa-prompt-alchemy-container .pa-tooltip-container {
    position: relative;
}
#pa-prompt-alchemy-container .pa-tooltip-container .pa-tooltip-text {
    visibility: hidden;
    width: max-content;
    max-width: 300px;
    background-color: #1f2937;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    white-space: normal;
    bottom: 125%; /* デフォルトは上に表示 */
}
/* --- ▼▼▼ 追加 ▼▼▼ --- */
/* 下に表示するためのスタイル */
#pa-prompt-alchemy-container .pa-tooltip-container .pa-tooltip-text.tooltip-bottom {
    bottom: auto;
    top: 125%;
}
/* --- ▲▲▲ 追加ここまで ▲▲▲ --- */
#pa-prompt-alchemy-container .pa-tooltip-container:hover .pa-tooltip-text {
    visibility: visible;
    opacity: 1;
}
/* 予測変換の選択中スタイル */
#pa-prompt-alchemy-container .pa-autocomplete-active {
    background-color: #dbeafe;
}

/* モーダル内の閉じるボタン(×)のスタイル */
#pa-prompt-alchemy-container .close-modal-btn {
    font-size: 1.75rem;
    line-height: 1;
    color: #6b7280;
    transition: color 0.2s ease-in-out;
    padding: 0.5rem;
    margin: -0.5rem;
}
#pa-prompt-alchemy-container .close-modal-btn:hover {
    color: #1f2937;
}

/* プロンプト表示エリアがフォーカスされた時のスタイル */
#pa-prompt-alchemy-container #pa-prompt-display-area:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-color: #3b82f6;
}

/* ソートボタンのスタイル */
#pa-prompt-alchemy-container .pa-sort-btn {
    background-color: #e5e7eb;
    color: #4b5563;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease-in-out;
}
#pa-prompt-alchemy-container .pa-sort-btn:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
#pa-prompt-alchemy-container .pa-sort-btn:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-left-width: 0;
}
#pa-prompt-alchemy-container .pa-sort-btn:hover {
    background-color: #d1d5db;
}
#pa-prompt-alchemy-container .pa-sort-btn.active {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
    z-index: 10;
}