/* ==========================================================================
   1. ボタン (Buttons) - 柔和な丸みとElevation、有機的なトランジション
   ========================================================================== */
.kamos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--kamos-space-sm) var(--kamos-space-md);
    border-radius: var(--kamos-border-radius-md); /* Designographyの「やわらかな丸み」 */
    font-weight: 600; /* SemiBold */
    font-size: var(--kamos-font-size-body);
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    min-height: 44px; /* タッチターゲットサイズ確保 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                border-color var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                color var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                box-shadow var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                transform var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce);
}
.kamos-btn-compact {
    padding: var(--kamos-space-xs) var(--kamos-space-sm);
    min-height: 36px;
    font-size: var(--kamos-font-size-sm);
}
.kamos-btn:hover:not(:disabled) {
    box-shadow: var(--kamos-box-shadow-md); /* ホバー時にElevationを上げる */
    transform: translateY(-2px); /* やや浮き上がる */
}
.kamos-btn:focus-visible {
    outline: none;
    box-shadow: var(--kamos-box-shadow-focus); /* Kamosグリーンを基調としたフォーカスリング */
}
.kamos-btn:active:not(:disabled) {
    transform: translateY(0px); /* 押下時に沈む */
    box-shadow: var(--kamos-box-shadow-sm); /* 押下時の影 */
}
.kamos-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.kamos-btn .material-symbols-outlined {
    margin-right: var(--kamos-space-xs);
    font-size: 1.1em; /* Adjust icon size within button */
}
.kamos-btn.icon-only .material-symbols-outlined {
    margin-right: 0;
}

/* Button Variants */
.kamos-btn-filled {
    background-color: var(--kamos-primary-color);
    color: var(--kamos-text-color-inverted);
    border-color: var(--kamos-primary-color);
}
.kamos-btn-filled:hover:not(:disabled) {
    background-color: var(--kamos-primary-darker);
    border-color: var(--kamos-primary-darker);
    color: var(--kamos-text-color-inverted); /* Ensure text remains white on hover */
}

.kamos-btn-outlined {
    background-color: transparent;
    color: var(--kamos-primary-color);
    border: 1px solid var(--kamos-primary-color);
}
.kamos-btn-outlined:hover:not(:disabled) {
    background-color: rgba(var(--kamos-primary-color-rgb), 0.1); /* Kamosグリーンを薄く透過 */
    color: var(--kamos-primary-darker);
    border-color: var(--kamos-primary-darker);
}

.kamos-btn-text {
    background-color: transparent;
    color: var(--kamos-primary-color);
    border: 1px solid transparent;
    padding-left: var(--kamos-space-xs);
    padding-right: var(--kamos-space-xs);
}
.kamos-btn-text:hover:not(:disabled) {
    background-color: rgba(var(--kamos-primary-color-rgb), 0.08);
    color: var(--kamos-primary-darker);
}

.kamos-btn-elevated {
    background-color: var(--kamos-bg-color-body);
    color: var(--kamos-primary-color);
    box-shadow: var(--kamos-box-shadow-md); /* Elevationを明示的に適用 */
}
.kamos-btn-elevated:hover:not(:disabled) {
    background-color: var(--kamos-bg-color-container-light);
    box-shadow: var(--kamos-box-shadow-lg); /* ホバーでElevationを上げる */
}

.kamos-btn-tonal {
    background-color: rgba(var(--kamos-primary-color-rgb), 0.1);
    color: var(--kamos-primary-darker);
}
.kamos-btn-tonal:hover:not(:disabled) {
    background-color: rgba(var(--kamos-primary-color-rgb), 0.15);
}

/* Vitamin Buttons (楽しげでハッピーな気持ちになるように、ポップなエフェクト) */
.kamos-btn-vitamin-yellow {
    background-color: var(--kamos-ds-vitamin-yellow);
    color: var(--kamos-text-color-default);
    border-color: var(--kamos-ds-vitamin-yellow);
}
.kamos-btn-vitamin-yellow:hover:not(:disabled) {
    background-color: #FACC15; /* 少し濃いイエロー */
    border-color: #FACC15;
    color: var(--kamos-text-color-default); /* Ensure text remains default on hover */
    transform: translateY(-3px) scale(1.03); /* もっと浮き上がり、拡大 */
    box-shadow: var(--kamos-box-shadow-lg);
}
.kamos-btn-vitamin-pink {
    background-color: var(--kamos-ds-vitamin-pink);
    color: var(--kamos-text-color-inverted);
    border-color: var(--kamos-ds-vitamin-pink);
}
.kamos-btn-vitamin-pink:hover:not(:disabled) {
    background-color: #EC4899; /* 少し濃いピンク */
    border-color: #EC4899;
    color: var(--kamos-text-color-inverted); /* Ensure text remains white on hover */
    transform: translateY(-3px) scale(1.03); /* もっと浮き上がり、拡大 */
    box-shadow: var(--kamos-box-shadow-lg);
}
.kamos-btn-vitamin-orange { /* 新たに追加したオレンジを適用 */
    background-color: var(--kamos-vitamin-orange);
    color: var(--kamos-text-color-inverted);
    border-color: var(--kamos-vitamin-orange);
}
.kamos-btn-vitamin-orange:hover:not(:disabled) {
    background-color: var(--kamos-vitamin-orange-darker);
    border-color: var(--kamos-vitamin-orange-darker);
    color: var(--kamos-text-color-inverted); /* Ensure text remains white on hover */
    transform: translateY(-3px) scale(1.03); /* もっと浮き上がり、拡大 */
    box-shadow: var(--kamos-box-shadow-lg);
}


/* Icon Button specific styles */
.kamos-icon-btn {
    padding: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kamos-icon-btn.large .material-symbols-outlined {
    font-size: 28px;
}
.kamos-icon-btn .material-symbols-outlined {
    margin-right: 0;
}

/* ==========================================================================
   17. ダウンロードボタン (Download Buttons) - 柔和な丸みとElevation、ビタミンカラー
   ========================================================================== */
.download-button-container {
    position: fixed;
    bottom: var(--kamos-space-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    padding: var(--kamos-space-sm) var(--kamos-space-md);
    border-radius: var(--kamos-border-radius-lg);
    box-shadow: var(--kamos-box-shadow-lg); /* Elevation */
    display: flex;
    gap: var(--kamos-space-sm);
}

/* Dark Mode for download-button-container */
:root.dark .download-button-container {
    background-color: var(--kamos-bg-color-container-dark-alpha);
    box-shadow: var(--kamos-box-shadow-lg);
}

.download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--kamos-space-sm) var(--kamos-space-md);
    font-size: var(--kamos-font-size-small);
    font-weight: 500;
    color: var(--kamos-text-color-default);
    background-color: var(--kamos-bg-color-body);
    border: 1px solid var(--kamos-border-color-default);
    border-radius: var(--kamos-border-radius-md);
    cursor: pointer;
    transition: all var(--kamos-transition-duration-medium) var(--kamos-transition-timing-function-kamos-organic-bounce);
    box-shadow: var(--kamos-box-shadow-sm);
    gap: var(--kamos-space-xs);
    min-height: 36px;
}

.download-button:hover {
    background-color: var(--kamos-bg-color-container-light);
    border-color: var(--kamos-primary-color);
    color: var(--kamos-primary-color);
    transform: translateY(-2px); /* やや浮き上がる */
    box-shadow: var(--kamos-box-shadow-md);
}

.download-button:active {
    transform: translateY(0);
    background-color: var(--kamos-border-color-light);
    box-shadow: var(--kamos-box-shadow-xs);
}
.download-button:focus-visible {
    outline: none;
    box-shadow: var(--kamos-box-shadow-focus);
}


.download-button .material-symbols-outlined {
    font-size: 20px;
    transition: transform var(--kamos-transition-duration-medium) var(--kamos-transition-timing-function-kamos-organic-bounce);
}
.download-button:hover .material-symbols-outlined {
    transform: rotate(-5deg) scale(1.05);
}

/* Individual download button icon colors on hover (ビタミンカラーを適用) */
#downloadReportImage:hover .material-symbols-outlined { color: var(--kamos-accent-blue); }
#downloadReportMarkdown:hover .material-symbols-outlined { color: var(--kamos-vitamin-orange); }
#downloadReportJson:hover .material-symbols-outlined { color: var(--kamos-ds-vitamin-pink); } /* kamos-ds-vitamin-pinkに修正 */
#downloadReportTxt:hover .material-symbols-outlined { color: var(--kamos-secondary-color); }
/* #exportToSheetButton:hover .material-symbols-outlined { color: var(--kamos-primary-color); } */

/* ==========================================================================
   18. Googleサインインボタン (Google Sign-in Button)
   ========================================================================== */
.google-signin-button-image {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-block;
    width: 100%;
    line-height: 0;
    transition: opacity var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                transform var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce);
}

.google-signin-button-image img {
    display: block;
    width: 220px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--kamos-border-radius-sm);
}

.google-signin-button-image:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.google-signin-button-image:active {
    opacity: 1;
    transform: translateY(0);
}

.google-signin-button-image:focus,
.google-signin-button-image:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.5);
    border-radius: var(--kamos-border-radius-sm);
}

.google-signin-button-image:disabled img {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Google Sign-in button icon adjustment (for existing text buttons) */
.google-signin-button .material-symbols-outlined {
    margin-right: 8px;
    font-size: 20px;
    vertical-align: middle;
}

/* ==========================================================================
   21. テーブル内のアクションボタン群 (Action Button Group) - ビタミンカラーとElevation
   ========================================================================== */

.ellipsis-button {
    background-color: transparent;
    color: var(--kamos-primary-color);
    border: 1px solid transparent;
    padding: var(--kamos-space-xs);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                color var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                border-color var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                box-shadow var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                transform var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* 影を削除 */
    flex-shrink: 0;
}
.ellipsis-button .material-symbols-outlined {
    font-size: 24px; /* アイコンサイズを少し大きく */
    opacity: 0.6; /* デフォルトの透明度を少し下げる */
    transition: opacity var(--kamos-transition-duration-short) ease;
}
.ellipsis-button:hover {
    background-color: rgba(var(--kamos-primary-color-rgb), 0.1);
    border-color: transparent;
    transform: scale(1.08); /* やや拡大 */
    box-shadow: var(--kamos-box-shadow-md);
}
.ellipsis-button:hover .material-symbols-outlined {
    opacity: 1; /* ホバーでアイコンを不透明に */
}
.ellipsis-button:active {
    transform: scale(1.0);
    box-shadow: var(--kamos-box-shadow-xs);
}
.ellipsis-button:focus-visible {
    outline: none;
    box-shadow: var(--kamos-box-shadow-focus);
}

.action-button-group .action-button {
    border: none;
    padding: var(--kamos-space-xs);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                box-shadow var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce),
                transform var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce);
    box-shadow: var(--kamos-box-shadow-sm); /* 軽い影 */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-button .material-symbols-outlined {
    font-size: 20px;
}
.action-button:hover {
    transform: translateY(-2px) scale(1.08); /* やや拡大、浮き上がる */
    box-shadow: var(--kamos-box-shadow-md);
}
.action-button:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.action-button:focus-visible {
    outline: none;
    box-shadow: var(--kamos-box-shadow-focus);
}

/* Action Button Colors Unified to Kamos Green */
.deep-research-button,
.suggestion-button,
.ask-ai-button,
.cell-regenerate-button {
    background-color: var(--kamos-primary-color);
    color: var(--kamos-text-color-inverted);
}

.deep-research-button:hover,
.suggestion-button:hover,
.ask-ai-button:hover,
.cell-regenerate-button:hover {
    background-color: var(--kamos-primary-darker);
}

/* Action Button Styling (深掘り、改善提案、AIに質問、再生成ボタンの共通スタイル) */
.action-button {
    /* Kamosグリーンを背景色に設定 */
    background-color: #10B981; /* Kamosグリーン */
    color: #ffffff; /* 白いテキスト */
    border-radius: 9999px; /* 完全な円形 */
    width: 48px; /* 幅 */
    height: 48px; /* 高さ */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* ホバー時のアニメーション */
    cursor: pointer;
    border: none; /* ボーダーをなくす */
}

.action-button:hover {
    background-color: #0d9d6e; /* ホバー時の少し濃いKamosグリーン */
    transform: translateY(-2px); /* 少し上に浮き上がるアニメーション */
}

.action-button:active {
    transform: translateY(0); /* クリック時に戻るアニメーション */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* 影を小さくする */
}

/* アイコンの色を白に設定 (Material Symbolsなどを使用している場合) */
.action-button .material-symbols-outlined {
    color: #ffffff;
    font-size: 24px; /* アイコンサイズ */
}

/* 各ボタンに特有のスタイルがあればここに追記 */
/* 例: 再生成ボタンのアイコンの色を少し変えるなど */
.action-button.regenerate-button .material-symbols-outlined {
    /* 必要であればここでスタイルを調整 */
}

/* Dark Mode Support for Action Buttons - 新規追加 */
/* html要素に .dark-mode-active クラスがある場合を想定し、ダークモード時のスタイルを定義 */
html.dark-mode-active .action-button {
    background-color: #111827; /* Kamos Designographyのgray_900を基調色として使用 */
    color: #F9FAFB; /* Kamos Designographyのgray_50を基調色として使用 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); /* 暗い背景に合わせた影 */
}

html.dark-mode-active .action-button:hover {
    background-color: #1F2937; /* ホバー時の背景色を少し明るくしてインタラクションを示す */
    transform: translateY(-2px);
}

html.dark-mode-active .action-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

html.dark-mode-active .action-button .material-symbols-outlined {
    color: #F9FAFB; /* ダークモードでもアイコンを明るい色に保ち、視認性を確保 */
}

/* saveFrameworkButton (Config Kitの「このフレームワークで次に進む」ボタン) - Kamosグリーンを強調し、ポップなエフェクト */
#saveFrameworkButton {
    box-shadow: var(--kamos-box-shadow-lg);
    transform: translateY(0);
    padding: var(--kamos-space-sm) var(--kamos-space-xl);
    font-size: var(--kamos-font-size-lg);
    font-weight: 700;
}
#saveFrameworkButton:hover:not(:disabled) {
    background-color: var(--kamos-primary-darker);
    border-color: var(--kamos-primary-darker);
    box-shadow: var(--kamos-box-shadow-xl);
    transform: translateY(-3px) scale(1.02);
}
#saveFrameworkButton:active:not(:disabled) {
    transform: translateY(0px);
    box-shadow: var(--kamos-box-shadow-md);
}
#saveFrameworkButton:focus-visible {
    outline: none;
    box-shadow: var(--kamos-box-shadow-focus);
}


/* 「質問文を生成」ボタン (Preview Panel内) - ビタミンイエローを強調し、ポップなエフェクト */
#generateAIButton {
    background-color: var(--kamos-ds-vitamin-yellow);
    color: var(--kamos-text-color-default);
    border-color: var(--kamos-ds-vitamin-yellow);
    box-shadow: var(--kamos-box-shadow-md);
    padding: var(--kamos-space-sm) var(--kamos-space-lg);
    font-weight: 700;
    border-radius: var(--kamos-border-radius-md);
    transition: all var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce);
}
#generateAIButton:hover:not(:disabled) {
    background-color: #FACC15;
    border-color: #FACC15;
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--kamos-box-shadow-lg);
}
#generateAIButton:active:not(:disabled) {
    transform: translateY(0px);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
#generateAIButton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.5), var(--kamos-box-shadow-md);
}