/* public/css/action-launcher.css */

#report-actions-container {
    position: fixed;
    bottom: 0; /* 画面下部に配置 */
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(calc(100% - 56px)); /* 表示領域を調整 */
    transition: transform 0.3s ease-in-out;
    background-color: transparent; 
    box-shadow: none; 
    border-top: none; 
    padding: 0; /* paddingをリセット */
}

#report-actions-container.is-open {
    transform: translateY(0);
}

.action-buttons-wrapper {
    background-color: var(--kamos-bg-body, #ffffff); 
    border-top: 1px solid var(--kamos-border-color, #e2e8f0);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); 
    margin: 0; /* 左右のmarginを削除 */
}

.dark .action-buttons-wrapper {
    background-color: var(--kamos-bg-body-dark, #1e293b); 
    border-top-color: var(--kamos-border-dark-color, #475569);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
}

#report-actions-toggles {
    display: flex;
    gap: 8px;
    padding: 8px 16px; /* 下にもpaddingを追加 */
    border-bottom: 1px solid var(--kamos-border-color, #e2e8f0);
    overflow-x: auto; /* コンテンツが多い場合に横スクロール可能にする */
    scrollbar-width: none; /* Firefox: スクロールバーを非表示 */
}

#report-actions-toggles::-webkit-scrollbar {
    display: none; /* Chrome/Safari: スクロールバーを非表示 */
}

.dark #report-actions-toggles {
    border-bottom-color: var(--kamos-border-dark-color, #475569);
}

.report-action-toggle {
    border-radius: 8px 8px 0 0; 
    background-color: transparent; 
    padding: 8px 16px;
    position: relative;
    top: 1px; 
    border: 1px solid transparent;
    border-bottom: none;
}

.report-action-toggle.active {
    background-color: var(--kamos-bg-body, #ffffff);
    border-color: var(--kamos-border-color, #e2e8f0);
    border-bottom-color: var(--kamos-bg-body, #ffffff); 
    z-index: 1;
}

.dark .report-action-toggle.active {
    background-color: var(--kamos-bg-body-dark, #1e293b);
    border-color: var(--kamos-border-dark-color, #475569);
    border-bottom-color: var(--kamos-bg-body-dark, #1e293b);
}

#report-actions-panels {
    padding: 12px 16px; /* 内部に左右のpaddingを移動 */
    min-height: 80px; 
}