/* app.css — Web shell canvas full-viewport */

:root {
    --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);
}

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    background: #001524;
}

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;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* HTML input over canvas text field — enables mobile keyboard */
.canvas-field-bridge {
    position: fixed;
    z-index: 10000;
    margin: 0;
    border: 2px solid #5eead4;
    border-radius: 8px;
    background: #042a3a;
    color: #f0fdfa;
    font-family: system-ui, sans-serif;
    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;
}

/*
 * WARNING — cấm pointer-events:none trên #app khi bridge mở.
 * Bridge (z-index cao) vẫn nhận tap trong ô text; OK/Back/Send trên canvas phải bấm được
 * (iOS/Android WebView — Done chỉ blur, không Enter). Rule: .cursor/rules/canvas-text-bridge.mdc
 */