.push-btn,
.pull-btn {
    position: absolute;
    width: 36vw;
    height: 4vh;
    align-self: center;
    cursor: pointer;
    border: var(--border-line);
    /* transition: transform 0.4s ease-in, */
    transition: transform var(--transition-slow) ease-in,
        /* box-shadow 0.16s, */
        box-shadow var(--transition-normal),
        /* color 0.16s, */
        color var(--transition-normal),
        /* background 0.16s; */
        background var(--transition-normal);
}

/* .push-btn:hover,
.pull-btn:hover {
    background: var(--text-green);
    color: var(--bg-primary);
    box-shadow: 0 0 10px var(--text-green);
} */

.push-btn {
    top: 0px;
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    /*navi.js logic in func updatePage*/
}

.head-indicator {
    position: absolute;
    top: 0px;
    left: 0px;
    width: fit-content;
    height: 32rem;
    white-space: nowrap;
    padding-bottom: 16px;
    border: var(--border-line);
    border-top: none;
    border-left: none;
    writing-mode: vertical-lr;
    flex-direction: row;
    justify-content: right;
    justify-content: right;
    font-weight: bold;
    font-size: var(--font-size);
    color: var(--text-green);
    overflow: hidden;
    /* transition: transform 0.4s ease-in; */
    transition: transform var(--transition-slow) ease-in;
}

@supports (writing-mode: sideways-lr) {
    .head-indicator {
        writing-mode: sideways-lr;
    }
}

/* iOS WebKit (iPad Chrome, iPhone Safari) does not render writing-mode: sideways-lr
   correctly — it appears as CW (+90°) instead of CCW (-90°).
   Fix: use writing-mode: vertical-rl (CW, works correctly on iOS) combined with
   scale: -1 -1 (CSS individual transform property). Double-flipping both axes
   converts CW → CCW. Crucially, `scale` is a separate CSS property and is NOT
   overridden when JS sets `style.transform` for the show/hide animation.
   -webkit-touch-callout is iOS-only, so this does not affect Desktop Chrome/Safari. */
@supports (-webkit-touch-callout: none) {
    .head-indicator {
        writing-mode: vertical-rl;
        scale: -1 -1;
        /* scale(-1,-1) flips physical left↔visual right and physical top↔visual bottom.
           Re-declare borders so the correct visual sides are shown:
           physical top (= visual bottom) and physical left (= visual right) get borders;
           physical right (= visual left) and physical bottom (= visual top) do not. */
        border: var(--border-line);
        border-right: none;
        border-bottom: none;
    }
}

.pull-btn {
    bottom: 0px;
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    /*navi.js logic in func updatePage*/
}

#log-textarea {
    /*follow push and pull btn height (by margin); add value -> gap -> no stick together with btn */
    margin: var(--single-textbox-margin);
    height: 100%;
    /*idk why, the font-size same as navi and btn, but looks smaller; needs add value*/
    /*note: unified in root*/
    font-size: var(--textbox-font-size);
}

/*scaffold*/

.feature-container {
    position: absolute;
    right: 0px;
    width: var(--sub-navi-height);
    height: 100%;
    user-select: none;
    background-color: transparent;
    flex-direction: column;
    justify-content: space-around;
    /* transition: transform 0.4s ease-in, */
    transition: transform var(--transition-slow) ease-in,
        /* box-shadow 0.16s, */
        box-shadow var(--transition-normal),
        /* color 0.16s, */
        color var(--transition-normal),
        /* background 0.16s; */
        background var(--transition-normal);
}

.page>* {
    /*simple patch for feature-container width caused offset*/
    transform: translateX(calc(var(--sub-navi-height)/2));
}

.feature-container * {
    user-select: auto;
}

.feature-btn {
    position: relative;
    height: 8vh;
    max-width: 100%;
    cursor: pointer;
    border: var(--border-line);
    border-right: none;
    transition: all 0.2s;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    /*detect page; if exit dedicated classList, then active -> active: left: 0%; initial: left: 100%*/
    /* left: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.feature-btn::after {
    content: "";
    display: block;
    width: 128%;
    height: 60%;
    background-color: var(--text-green);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.2s, filter 0.2s;
}

.feature-btn[data-feature-btn="translate-zh-TW"]::after {
    -webkit-mask-image: url('../images/translate_zh_tw.svg');
    mask-image: url('../images/translate_zh_tw.svg');
}

.feature-btn[data-feature-btn="translate-zh-CN"]::after {
    -webkit-mask-image: url('../images/translate_zh_cn.svg');
    mask-image: url('../images/translate_zh_cn.svg');
}

.feature-btn[data-feature-btn="translate-en"]::after {
    -webkit-mask-image: url('../images/translate_en.svg');
    mask-image: url('../images/translate_en.svg');
}

.feature-btn[data-feature-btn="translate-ja"]::after {
    -webkit-mask-image: url('../images/translate_ja.svg');
    mask-image: url('../images/translate_ja.svg');
}

.feature-btn[data-feature-btn="voice-to-textbox"]::after {
    -webkit-mask-image: url('../images/voice_to_textbox.svg');
    mask-image: url('../images/voice_to_textbox.svg');
}

.feature-btn[data-feature-btn="markdown-preview"]::after {
    -webkit-mask-image: url('../images/markdown_preview.svg');
    mask-image: url('../images/markdown_preview.svg');
}

/* Runtime icon — MODs that provide getIconUrl() inject --mod-icon-url */
.feature-btn[style*="--mod-icon-url"]::after {
    -webkit-mask-image: var(--mod-icon-url);
    mask-image: var(--mod-icon-url);
}

/* Status states (toggled by JS) */
.feature-btn.active::after {
    filter: drop-shadow(0 0 5px var(--text-orange));
}

.feature-btn.recording::after {
    background-color: var(--text-red);
    filter: drop-shadow(0 0 5px var(--text-red));
}

.feature-btn.processing::after {
    background-color: var(--text-orange);
    filter: drop-shadow(0 0 5px var(--text-orange));
}

@media (hover: hover) {
    .feature-btn:hover {
        background: transparent;
        box-shadow: 0 0 10px var(--text-green);
    }
}

.feature-shelf-container {
    position: absolute;
    left: 100%;
    /*left shelf scroll -100vw*/
    transform: translate3d(0vw, 0, 0);
    height: 100%;
    width: 100vw;
    margin-left: var(--scaffold-left-gap);
    padding-right: var(--scaffold-left-gap);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: auto;
}

/* Class to disable transition during dragging for immediate response */
.no-transition {
    transition: none !important;
}

/* Frosted glass effect */
.frosted-glass {
    /* background: var(--frosted-glass-bg); */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: var(--frosted-glass-border);
    /* box-shadow: var(--frosted-glass-shadow); */
}

.feature-shelf-back-btn {
    position: absolute;
    height: 100%;
    width: calc(var(--scaffold-left-gap) / 2);
    right: 100%;
    background-color: var(--feature-shelf-btn-bg);
    color: var(--feature-shelf-btn-color);
    /* Temporary logic, maybe override with CSS var */
    /* background-color: var(--bg-primary); */
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    /* border: var(--border-line); */
    border-right: none;
    cursor: col-resize;
    /* Indicate dragging */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.feature-shelf {
    display: none;
    padding: min(4vh, 4vw);
    height: 100%;
}



/* Shelf output textarea styling → moved to mod-shared.css (.mod-shelf-output) */