/* =====================================================================
   MTB — MOBILE TOOL BAR (dùng chung songs.php + public songs)
   - Chỉ tác động tới phần tử có class mtb-*  → desktop (>968px) giữ nguyên.
   - Phải nạp SAU songs-style.css / public-songs.css (các file đó có nhiều
     khai báo !important ở mobile cho .transpose-bar / .ps-transpose-bar).
   - Quy ước markup: bar = .mtb-bar ; nhóm = .mtb-group--tuner|chords|font|tone|cols ;
     nút = .mtb-btn ; trong nút: <span class="mtb-ico"><i class="fa-solid …"></i></span>
     + <span class="mtb-lbl">nhãn mobile</span> + <span class="mtb-txt-d">chữ desktop cũ</span>.
   ===================================================================== */

/* Desktop: ẩn phần chỉ dành cho mobile (icon + nhãn); chữ cũ nằm trong .mtb-txt-d */
.mtb-ico,
.mtb-lbl {
    display: none;
}

@media (max-width: 968px) {

    /* 1) Thanh cố định ở đáy màn hình */
    .mtb-bar {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 450 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 2px !important;
        background: var(--ps-surface, #fff) !important;
        color: var(--ps-text, #1f2937) !important;
        border: 0 !important;
        border-top: 1px solid var(--ps-border, #e2e8f0) !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.14) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* 2) Nhóm nút — DOM giữ thứ tự desktop, mobile sắp lại bằng order:
          Tuner | Hợp âm | Cỡ chữ | Reset, Tone−, [giá trị], Tone+  (tone sát mép PHẢI) */
    .mtb-bar .mtb-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 2px !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .mtb-bar .mtb-group--tuner  { order: 1; flex: 1 1 0 !important; }
    .mtb-bar .mtb-group--chords { order: 2; flex: 1 1 0 !important; }
    .mtb-bar .mtb-group--font   { order: 3; flex: 2 1 0 !important; }
    .mtb-bar .mtb-group--tone   { order: 4; flex: 3.6 1 0 !important; }
    .mtb-bar .mtb-group--font,
    .mtb-bar .mtb-group--tone {
        padding-left: 3px !important;
        border-left: 1px solid var(--ps-border, #e2e8f0) !important;
    }
    /* Nhóm Cột: chưa dùng trên mobile (ticket T5 sẽ bật nút Cột nổi) */
    .mtb-bar .mtb-group--cols { display: none !important; }

    /* Thứ tự trong nhóm tone: Reset, −, giá trị, + */
    .mtb-bar .mtb-btn--reset { order: 1; }
    .mtb-bar .mtb-btn--down  { order: 2; }
    .mtb-bar .mtb-disp       { order: 3; }
    .mtb-bar .mtb-btn--up    { order: 4; }

    /* 3) Nút: icon trên, nhãn nhỏ dưới, vùng bấm >=44px */
    .mtb-bar .mtb-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        min-height: 52px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 6px 1px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        background: transparent !important;
        color: inherit !important;
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        font-family: inherit !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        transition: background-color 0.15s ease, transform 0.08s ease;
    }
    .mtb-bar .mtb-btn:active { transform: scale(0.93); }
    .mtb-bar .mtb-btn:focus-visible {
        outline: 2px solid var(--ps-accent, var(--red, #c8102e));
        outline-offset: -2px;
    }
    .mtb-bar .mtb-btn:not(.mtb-btn--step):active {
        background: var(--ps-accent-soft, rgba(100, 116, 139, 0.18)) !important;
    }

    .mtb-bar .mtb-ico {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 1px;
        font-size: 19px;
        line-height: 1;
    }
    .mtb-bar .mtb-ico .mtb-mini { font-size: 9px; }
    .mtb-bar .mtb-lbl {
        display: block !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10.5px;
        line-height: 1.1;
        font-weight: 600;
        opacity: 0.8;
    }
    .mtb-bar .mtb-txt-d { display: none !important; }

    /* Tone +/−: nổi bật bằng màu nhấn (nhóm dùng nhiều nhất, ngón cái phải) */
    .mtb-bar .mtb-btn--step {
        background: var(--ps-accent, var(--red, #c8102e)) !important;
        color: #fff !important;
    }
    .mtb-bar .mtb-btn--step .mtb-lbl { opacity: 0.95; }
    .mtb-bar .mtb-btn--step:active { filter: brightness(0.9); }

    /* Ô hiển thị giá trị tone; ô cỡ chữ ẩn trên mobile (JS vẫn cập nhật) */
    .mtb-bar .mtb-disp {
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: inherit !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        font-variant-numeric: tabular-nums;
    }
    .mtb-bar .mtb-disp--font { display: none !important; }

    /* Hợp âm đang ẨN (songs.php gắn tb-btn--active; JS cũng đặt aria-pressed="true") */
    .mtb-bar .mtb-btn--chords.tb-btn--active,
    .mtb-bar .mtb-btn--chords[aria-pressed="true"] {
        background: var(--ps-accent-soft, rgba(200, 16, 46, 0.12)) !important;
        color: var(--ps-accent, var(--red, #c8102e)) !important;
    }

    /* 4) Chừa chỗ cho bar ở cuối nội dung */
    .ps-page:has(.mtb-bar),
    body > .container:has(.mtb-bar) {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 5) Đẩy toast / bộ đếm Playlist Viewer lên trên bar */
    body:has(.mtb-bar) .song-toast,
    body:has(.mtb-bar) .pp-toast {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body:has(.mtb-bar) .pending-toast {
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body:has(.mtb-bar) .pv-nav-count {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Màn rất hẹp (iPhone SE cũ, 320px) */
@media (max-width: 340px) {
    .mtb-bar { padding-left: 3px !important; padding-right: 3px !important; }
    .mtb-bar .mtb-ico { font-size: 17px; }
    .mtb-bar .mtb-lbl { font-size: 9.5px; }
    .mtb-bar .mtb-disp { flex-basis: 26px !important; width: 26px !important; font-size: 13px !important; }
}

/* ===== Hàng nút hành động (Chia sẻ / Nhanh / playlist) đặt phía TRÊN .ps-detail-actions ===== */
.mtb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}
@media (max-width: 968px) {
    .mtb-actions { gap: 8px; margin-top: 16px; }
    .mtb-actions .ps-tool-btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
}

/* ===== T5: nút Cột nổi (mép trái, ngay trên bar) + 2 cột trên mobile ===== */
@media (max-width: 968px) {
    .mtb-bar .mtb-group.mtb-group--cols {
        display: flex !important;
        position: absolute !important;
        left: 8px !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(100% + 10px) !important;
        flex: none !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        z-index: 1;
    }
    .mtb-bar .mtb-group--cols .mtb-btn--cols {
        flex: 0 0 auto !important;
        min-width: 56px !important;
        min-height: 48px !important;
        padding: 6px 12px !important;
        background: var(--ps-surface, #fff) !important;
        color: var(--ps-text, #1f2937) !important;
        border: 1px solid var(--ps-border, #e2e8f0) !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
    }
    body .song-content pre[data-cols="2"],
    .ps-lyrics-pre[data-cols="2"] {
        column-count: 2 !important;
        column-gap: 18px !important;
    }
}