:root {
    color-scheme: dark;
    font: 16px system-ui, sans-serif;
    color: #ecf3f5;
    background: #101418;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }

#welcome {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 20px;
}

#connect, #text-form {
    display: grid;
    gap: 12px;
    width: min(100%, 360px);
    padding: 24px;
    border: 1px solid #35434b;
    border-radius: 16px;
    background: #1a2329;
}

h1 { margin: 0 0 12px; font-size: 2rem; }
label { font-size: .9rem; }
#status { margin: 0; color: #ffcbad; min-height: 1.2em; }

input, textarea, button {
    font: inherit;
    color: inherit;
    border: 1px solid #42535c;
    border-radius: 8px;
    background: #222e36;
    min-height: 44px;
    padding: 8px 10px;
}

input, textarea { width: 100%; background: #11191e; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; }
.primary, button[aria-pressed="true"] { background: #a8e5d4; color: #102b24; }

#workspace {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100dvh;
    position: relative;
}

#viewport {
    position: relative;
    display: flex;
    overflow: auto;
    scrollbar-width: none;
    touch-action: none;
}

#display { flex: none; margin: auto; width: 100%; height: 100%; }
#pan-surface { position: absolute; inset: 0 0 var(--toolbar-height, 60px); touch-action: none; cursor: grab; }
#pan-surface:active { cursor: grabbing; }

nav {
    display: flex;
    gap: 5px;
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid #35434b;
    background: #1a2329;
}

nav button { flex: 1; min-width: 0; padding-inline: 2px; }
#text-form { position: absolute; bottom: var(--toolbar-height, 60px); left: 50%; transform: translateX(-50%); z-index: 2; }