/* World Board update 13 — touch/mobile board */
.mobile-board-dock { display: none; }

@media (max-width: 850px), (pointer: coarse) {
    html, body { overscroll-behavior: none; }

    #app {
        grid-template-rows: 52px 1fr;
        height: 100dvh;
    }

    .topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: max(4px, env(safe-area-inset-top)) 8px 4px;
        min-height: 52px;
    }

    .brand, .toolbar { display: none !important; }

    .board-nav {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .board-nav #backBoardBtn {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 7px 9px;
        border-radius: 9px;
    }

    #boardTitle {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }

    .userbox { font-size: 11px; }
    .userbox span { display: none; }
    .workspace { grid-template-columns: 1fr; }
    .sidepanel { display: none; }

    #canvasWrap {
        min-height: 0;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    #canvasWrap .canvas-container,
    #canvasWrap canvas { touch-action: none !important; }

    .status {
        bottom: calc(80px + env(safe-area-inset-bottom));
        left: 8px;
        right: auto;
        max-width: calc(100vw - 16px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-board-dock {
        position: fixed;
        z-index: 70;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        background: rgba(19, 23, 28, .96);
        border-top: 1px solid #35404a;
        box-shadow: 0 -8px 26px rgba(0,0,0,.3);
        backdrop-filter: blur(9px);
    }

    .mobile-board-dock::-webkit-scrollbar { display: none; }

    .mobile-board-dock button,
    .mobile-board-dock a {
        flex: 0 0 62px;
        min-width: 62px;
        height: 58px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 2px;
        padding: 4px;
        border: 1px solid #3b4651;
        border-radius: 10px;
        background: #242b33;
        color: #edf2f6;
        text-decoration: none;
        font: inherit;
        touch-action: manipulation;
    }

    .mobile-board-dock button > span,
    .mobile-board-dock a > span { font-size: 20px; line-height: 1; }
    .mobile-board-dock small { font-size: 9px; line-height: 1.1; }
    .mobile-board-dock button.active { background: #425365; border-color: #748ba1; }
    .mobile-board-dock button:disabled { opacity: .35; }

    #mobileDeleteBtn:not(:disabled) {
        background: #5a2c2c;
        border-color: #9b5050;
    }

    #mobileDeleteBtn:not(:disabled):active {
        background: #743737;
    }

    .tree-panel {
        left: 8px;
        right: 8px;
        top: 8px;
        width: auto;
        max-height: calc(100% - 92px);
    }

    .folder-dialog {
        width: min(94vw, 560px);
        max-height: calc(100dvh - 24px);
    }
}