/* =============================================
   COCOPASHATTO - Bottom Tab Bar (ファン側)
   マークアップの単一ソース: app/views/partials/tab_bar.php

   表示ルール
     - Web モバイル幅 (<lg)  : 表示
     - Web デスクトップ (>=lg): 非表示（従来どおり上部ナビを使う）
     - ネイティブアプリ       : 画面幅に関係なく常時表示
   ============================================= */
@import url('tokens.css');

:root {
    --tab-bar-h: 56px;
    /* iOSのホームバー分を含めた実効の高さ。本文の下部余白やFABの持ち上げに使う */
    --tab-bar-total-h: calc(var(--tab-bar-h) + env(safe-area-inset-bottom, 0px));
}

/* デフォルトは非表示。以下の2ブロックで表示条件を足していく */
.tab-bar,
.tab-bar-spacer {
    display: none;
}

@media (max-width: 991.98px) {
    .tab-bar,
    .tab-bar-spacer {
        display: block;
    }
}

/* ネイティブアプリは幅に関係なく常時表示（.native-app は html/body どちらにも付く） */
.native-app .tab-bar,
.native-app .tab-bar-spacer {
    display: block;
}

/* 撮影履歴・設定は app.css 側でコンテナに下部余白を持っているのでスペーサーは不要 */
body.app-view .tab-bar-spacer {
    display: none;
}

/* fixed のタブバーに本文が隠れないよう、フローに同じ高さを確保する */
.tab-bar-spacer {
    height: var(--tab-bar-total-h);
}

.tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Bootstrapの sticky(1020)より上、modal-backdrop(1050)とギャラリー検索オーバーレイ(1040)より下 */
    z-index: 1035;
    background: var(--bg-card, #FFFDF8);
    border-top: 1px solid var(--border-light, rgba(41, 37, 36, 0.08));
    box-shadow: 0 -2px 10px rgba(120, 100, 80, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tab-bar-inner {
    display: flex;
    align-items: stretch;
    height: var(--tab-bar-h);
    max-width: 640px;
    margin: 0 auto;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--text-muted, #A9A29A);
    font-family: var(--font-sans);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, transform 0.15s ease;
}

.tab-item-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.tab-item-label {
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tab-item:hover {
    color: var(--text-secondary, #78716C);
}

.tab-item:active {
    transform: scale(0.94);
}

.tab-item.active {
    color: var(--primary, #FF3D5C);
}

/* ギャラリーの検索FABがタブバーに重ならないよう持ち上げる（gallery.css の bottom:24px を上書き） */
@media (max-width: 991.98px) {
    .search-fab {
        bottom: calc(24px + var(--tab-bar-total-h));
    }
}

.native-app .search-fab {
    bottom: calc(24px + var(--tab-bar-total-h));
}