/* =================================================================
 * Mach Tools: 類語・連想語マッハ検索 (style.css)
 * ================================================================= */

/* --- 1. Layout & Core --- */
.tool-settings,
.tool-results {
    height: 100%;
}

.tool-results {
    display: flex;
    flex-direction: column;
}

.tool-results .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tool-results .card-body > .h-100 {
    flex-grow: 1;
}

.tool-results-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
}

/* --- 2. UI Components --- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bs-body-bg-rgb), 0.7);
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 1090;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#drop-zone {
    background-color: var(--bs-body-bg);
    border: 2px dashed var(--bs-border-color);
    transition: all 0.2s ease;
    cursor: pointer;
}

#drop-zone.drag-over {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

[data-bs-theme="dark"] #drop-zone {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] #drop-zone.drag-over {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

.result-table-wrapper {
    max-height: 500px;
    overflow-y: auto;
}

/* --- 3. Keyword Search UI --- */
#baseKeyword::placeholder {
    opacity: 0.35 !important;
}

[data-bs-theme="dark"] #baseKeyword::placeholder {
    opacity: 0.25 !important;
}

/* キーワード行とホバーエフェクト */
.keyword-row {
    font-size: 0.9rem;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.keyword-row:hover {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.keyword-text {
    transition: color 0.2s ease;
}

.keyword-row:hover .keyword-text {
    color: var(--bs-primary) !important;
}

/* コピーボタンの表示制御 */
.copy-single-btn {
    padding: 0 0.4rem !important;
    font-size: 0.85rem !important;
    opacity: 0; 
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.keyword-row:hover .copy-single-btn {
    opacity: 1;
}

.copy-single-btn:hover {
    background-color: var(--bs-secondary-bg);
}

/* インテントカラー (Light Mode) */
.bg-intent-know { background-color: rgba(13, 110, 253, 0.1); }
.bg-intent-buy  { background-color: rgba(255, 193, 7, 0.1); }
.bg-intent-do   { background-color: rgba(25, 135, 84, 0.1); }
.bg-intent-go   { background-color: rgba(220, 53, 69, 0.1); }

/* インテントカラー (Dark Mode) */
[data-bs-theme="dark"] .bg-intent-know { background-color: rgba(13, 110, 253, 0.2); }
[data-bs-theme="dark"] .bg-intent-buy  { background-color: rgba(255, 193, 7, 0.2); }
[data-bs-theme="dark"] .bg-intent-do   { background-color: rgba(25, 135, 84, 0.2); }
[data-bs-theme="dark"] .bg-intent-go   { background-color: rgba(220, 53, 69, 0.2); }

.intent-list-wrapper {
    min-height: 100px;
}

/* --- 4. Content & SEO Section --- */
[data-bs-theme="dark"] .seo-table .table-light {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-700) !important;
}

[data-bs-theme="dark"] .seo-table .bg-body-tertiary {
    background-color: var(--bs-gray-900) !important;
    color: var(--bs-gray-300) !important;
}

[data-bs-theme="dark"] .seo-table td.text-muted {
    color: var(--bs-gray-400) !important;
}

[data-bs-theme="dark"] .content-seo .accordion-button {
    background-color: var(--bs-gray-900);
    color: var(--bs-gray-200);
}

[data-bs-theme="dark"] .content-seo .accordion-button:not(.collapsed) {
    background-color: var(--bs-gray-800);
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .content-seo .accordion-body {
    background-color: var(--bs-gray-900);
    color: var(--bs-gray-300);
}

/* --- 5. Skeleton Loading --- */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-item {
    height: 36px;
    margin-bottom: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg) 50%, var(--bs-secondary-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

/* --- 6. Stock Badge UI --- */
.stock-badge {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--bs-primary-border-subtle) !important;
}

.stock-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

.stock-remove-icon {
    cursor: pointer;
    opacity: 0.6;
    font-size: 1.1em;
    padding: 2px;
    transition: all 0.2s ease;
    color: var(--bs-primary-emphasis);
}

.stock-remove-icon:hover {
    opacity: 1;
    color: var(--bs-danger) !important;
    transform: scale(1.2);
}

/* --- 7. History Scroll Wrapper --- */
.history-scroll-wrapper {
    -ms-overflow-style: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
    padding-bottom: 4px;
}

.history-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
    display: block; 
}

.history-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.history-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--bs-border-color-translucent);
    border-radius: 10px;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
}

/* --- 8. Processing State (Loading) --- */
body.is-processing {
    cursor: wait !important;
}

body.is-processing .keyword-row,
body.is-processing .history-link,
body.is-processing .stock-badge,
body.is-processing .breadcrumb-item button {
    pointer-events: none !important;
    opacity: 0.4 !important;
    filter: grayscale(100%);
    transition: none !important;
}

body.is-processing .keyword-row:hover {
    background-color: transparent !important;
}

body.is-processing .keyword-text {
    color: var(--bs-secondary) !important;
}

body.is-processing #start-btn,
body.is-processing #baseKeyword {
    pointer-events: none !important;
    opacity: 0.7;
}

/* --- キーボードナビゲーション用フォーカススタイル --- */
.keyword-row {
    outline: none; /* 標準のアウトラインを消す */
}
/* キーボードで選択中の行をハイライト */
.keyword-row.keyboard-focus {
    background-color: var(--bs-primary-bg-subtle) !important;
    box-shadow: inset 2px 0 0 0 var(--bs-primary);
}
.keyword-row.keyboard-focus .keyword-text {
    color: var(--bs-primary) !important;
}
.keyword-row.keyboard-focus .copy-single-btn {
    opacity: 1;
}

/* --- UIアニメーション・汎用 --- */
.fade-in {
    animation: fadeIn 0.3s ease-in forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- D3.js マインドマップ用スタイル --- */
#mindmap-canvas {
    background-color: var(--bs-body-bg);
}
.node-circle {
    stroke: var(--bs-body-bg);
    stroke-width: 2px;
    transition: filter 0.2s ease, stroke-width 0.2s ease;
}
.node-circle:hover {
    filter: brightness(1.2);
    stroke-width: 3px;
    stroke: var(--bs-body-color);
}
.node-text {
    font-family: var(--bs-font-sans-serif);
    font-size: 13px;
    font-weight: bold;
    fill: var(--bs-body-color);
    pointer-events: none;
    text-shadow: 
        -2px -2px 2px var(--bs-body-bg),
         2px -2px 2px var(--bs-body-bg),
        -2px  2px 2px var(--bs-body-bg),
         2px  2px 2px var(--bs-body-bg);
}
.link-line {
    stroke: var(--bs-border-color);
    stroke-opacity: 0.6;
}
.cursor-grab {
    cursor: grab;
}
.cursor-grab:active {
    cursor: grabbing;
}