/* app.css — Web shell canvas full-viewport + safe-area inset */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Android MainActivity inject; browser fallback env(safe-area-inset-*) */
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --app-bg: #0f172a;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    background: var(--app-bg);
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

@supports (height: 100dvh) {
    html,
    body {
        height: 100dvh;
    }
}

/*
 * Safe-area trên body (border-box) — không dùng 100vh trên #app.
 * Trên Android WebView edge-to-edge, 100vh thường = vùng giữa system bars;
 * trừ inset lần nữa → đáy “lùi” gấp đôi. Canvas = replaced element nên
 * không stretch bằng top+bottom+height:auto (vẫn ~300×150).
 */
body {
    padding: var(--sat, 0px) var(--sar, 0px) var(--sab, 0px) var(--sal, 0px);
}

#app {
    display: block;
    position: relative;
    width: 100% !important;
    height: 100% !important;
    background: var(--app-bg);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* HTML input đè lên ô text canvas — bật bàn phím mobile */
.canvas-field-bridge {
    position: fixed;
    z-index: 10000;
    margin: 0;
    border: 2px solid #22c55e;
    border-radius: 8px;
    background: #0f172a;
    color: #f8fafc;
    font-family: system-ui, sans-serif;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    opacity: 1;
    display: none;
    touch-action: manipulation;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
    -webkit-appearance: none;
    appearance: none;
}

body.canvas-input-active {
    touch-action: auto;
}