/* Calcebra on iPhone and iPad (the Capacitor app in mobile/), plus the few
   touch/offline pieces the website shares.

   Everything app-only is scoped to html.native-app, which platform.js sets
   before first paint; html.device-iphone / html.device-ipad say which.
   The website never has those classes, so these rules do nothing there.

   Safe areas: the app draws edge to edge (viewport-fit=cover, added to the
   app's copy of index.html by mobile/scripts/build-web.mjs). The --safe-*
   values are the notch / Dynamic Island / home indicator insets. Without
   viewport-fit=cover (the website) env() is 0. */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --native-keyboard-height: 0px;
}

/* ---- Connection pill (website and app) ---------------------------------- */

.connection-pill {
    position: fixed;
    left: 50%;
    bottom: calc(14px + var(--safe-bottom));
    transform: translateX(-50%);
    z-index: 10050;
    max-width: calc(100vw - 32px);
    padding: 8px 14px;
    border-radius: 999px;
    background: #2b2d3a;
    color: #fff;
    font: 600 13px/1.35 'Karla', system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.connection-pill[data-state="online"] {
    background: #2f7d4f;
}

.connection-pill[hidden] {
    display: none;
}

/* ---- Apple Pencil: "finger scrolls / finger draws" --------------------- */

.finger-mode-btn[hidden] {
    display: none;
}

/* iPhones have no Apple Pencil; keep the toolbar's room for Undo/Redo. */
html.device-iphone .finger-mode-btn {
    display: none;
}

.finger-mode-btn[aria-pressed="true"] {
    background: var(--accent-soft, rgba(102, 92, 240, 0.14));
    color: var(--accent, #665cf0);
}

/* ---- Camera buttons ----------------------------------------------------- */

.start-photo-choice[hidden],
.given-problem-photo[hidden] {
    display: none;
}

.homework-photo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ======================================================================== */
/* The app                                                                  */
/* ======================================================================== */

html.native-app,
html.native-app body {
    /* No rubber-band bounce of the whole page, no long-press callouts or
       link previews on the app's own chrome, no grey tap flash. */
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

html.native-app body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

html.native-app button,
html.native-app .tool-btn,
html.native-app .studio-header {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* The Pencil must never select text or raise the magnifier on the board. */
html.native-app #board,
html.native-app .board-stage {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Header clears the status bar / Dynamic Island. */
html.native-app .studio-header {
    padding-top: calc(10px + var(--safe-top));
}

/* The bottom of the work area clears the home indicator. */
html.native-app .app-shell {
    padding-bottom: calc(14px + var(--safe-bottom));
}

/* Overlays (sign-in, topic picker, account) keep their cards out of the
   notch and the home indicator. */
html.native-app .login-overlay,
html.native-app .level-select-overlay,
html.native-app .account-overlay {
    padding-top: calc(16px + var(--safe-top));
    padding-bottom: calc(16px + var(--safe-bottom));
}

/* The website's tester feedback dock floats over the board. In the app it
   would cover the student's work; reports stay available under each tutor
   reply ("No, report it"). */
html.native-app .student-testing-dock {
    display: none !important;
}

/* Minimum 44pt touch targets (Apple HIG) for the controls used mid-work. */
html.native-app .tool-btn,
html.native-app .work-mode-btn,
html.native-app .ai-btn,
html.native-app .given-problem-peek,
html.native-app .given-problem-edit {
    min-height: 44px;
}

html.native-app .tool-btn {
    min-width: 44px;
}

/* Content scrolled up under the status bar gets a solid backdrop, so the
   clock and battery stay readable. */
html.native-app body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--safe-top);
    background: var(--surface-panel, #fbf8ef);
    z-index: 10040;
    pointer-events: none;
}

/* ---- iPhone: once the student is working, the work dominates ------------ */

/* The level is chosen on the topic picker; mid-problem it only costs a row. */
html.native-app.device-iphone body.work-live .studio-header .level-banner {
    display: none;
}

html.native-app.device-iphone body.work-live .studio-header {
    padding-bottom: 6px;
    row-gap: 6px;
}

/* Type / Write and Hint / Check stay on screen while the page scrolls
   (to the chat, or to a long list of typed steps). */
html.native-app.device-iphone body.work-live .work-mode-bar {
    position: sticky;
    top: var(--safe-top);
    z-index: 40;
    background: var(--surface-panel, #fbf8ef);
}

/* Pen, eraser, undo, redo and clear stay within reach, above the home
   indicator, whenever the student is writing (iPhone and iPad portrait;
   the wide layout already pins the toolbar). */
html.native-app .workspace[data-work-mode="write"] .floating-toolbar {
    position: sticky;
    bottom: calc(6px + var(--safe-bottom));
    z-index: 30;
}

/* iPhone on its side: very little height. The mode row goes while working;
   the header's own Homework Session button still opens Homework. */
@media (orientation: landscape) and (max-height: 500px) {
    html.native-app.device-iphone body.work-live .studio-header .sidebar-actions {
        display: none;
    }

    /* One column: the board takes the width, Math Chat sits below it. */
    html.native-app.device-iphone .app-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.native-app.device-iphone .board-card {
        min-height: 300px;
        height: calc(100dvh - var(--safe-bottom) - 24px);
    }
}