diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e629119..7b1c274 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -82,3 +82,22 @@ jobs:
           components: rustfmt
       - name: Run cargo fmt
         run: cargo fmt --all -- --check
+
+  # Run wasm compile checks to catch web-only type mismatches.
+  wasm_check:
+    name: Wasm Compile
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - name: Checkout sources
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+      - name: Install stable toolchain
+        uses: dtolnay/rust-toolchain@stable
+      - name: Check wasm target
+        run: rustup target add wasm32-unknown-unknown
+      - name: Run wasm compile checks
+        run: |
+          cargo check -p vizmat-core --target wasm32-unknown-unknown --no-default-features
+          cargo check -p vizmat-app --target wasm32-unknown-unknown --no-default-features
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index b859071..ba5529b 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -30,6 +30,11 @@ jobs:
         run: |
           curl https://drager.github.io/wasm-pack/installer/init.sh -sSf | bash
 
+      - name: Run wasm compile checks
+        run: |
+          cargo check -p vizmat-core --target wasm32-unknown-unknown --no-default-features
+          cargo check -p vizmat-app --target wasm32-unknown-unknown --no-default-features
+
       - name: Build WASM
         run: |
           if [ "${{ github.ref }}" = "refs/heads/main" ]; then
diff --git a/justfile b/justfile
index c9fcef9..3d3fcc2 100644
--- a/justfile
+++ b/justfile
@@ -61,6 +61,11 @@ watch:
 bench:
     cargo bench -p vizmat-core --bench bond_cache
 
+wasm-check:
+    rustup target add wasm32-unknown-unknown
+    cargo check -p vizmat-core --target wasm32-unknown-unknown --no-default-features
+    cargo check -p vizmat-app --target wasm32-unknown-unknown --no-default-features
+
 wasm:
     rustup target add wasm32-unknown-unknown --toolchain nightly-aarch64-apple-darwin
     cd vizmat-app && PATH="$HOME/.cargo/bin:$PATH" NO_COLOR=false trunk serve --port 8082
diff --git a/vizmat-app/index.html b/vizmat-app/index.html
index 8ff2688..0342c71 100644
--- a/vizmat-app/index.html
+++ b/vizmat-app/index.html
@@ -50,5 +50,16 @@ <h1 class="site-title">vizmat <span>molecule / crystal</span> visual lab</h1>
     <div class="canvas-shell">
       <canvas id="bevy-canvas"></canvas>
     </div>
+    <input
+      id="picker-keyboard-input"
+      type="text"
+      inputmode="search"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      enterkeyhint="search"
+      aria-label="Structure search"
+    >
   </body>
 </html>
diff --git a/vizmat-app/index.js b/vizmat-app/index.js
index db47cf9..4155757 100644
--- a/vizmat-app/index.js
+++ b/vizmat-app/index.js
@@ -2,8 +2,355 @@
   const loader = document.getElementById("app-loader");
   const status = document.getElementById("loader-status");
   const canvas = document.getElementById("bevy-canvas");
+  const pickerInput = document.getElementById("picker-keyboard-input");
   if (!loader) return;
 
+  const viewportState = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+  let pickerOpen = false;
+
+  const applyViewportSizing = () => {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const shouldUpdate =
+      !pickerOpen || height >= viewportState.height || width !== viewportState.width;
+
+    if (shouldUpdate) {
+      viewportState.width = width;
+      viewportState.height = height;
+
+      const root = document.documentElement;
+      const desktopCanvasHeight = Math.min(height * 0.8, 900);
+      const mobileCanvasHeight = Math.min(height * 0.82, 900);
+
+      root.style.setProperty("--app-viewport-height", `${height}px`);
+      root.style.setProperty(
+        "--app-canvas-height-desktop",
+        `${desktopCanvasHeight}px`,
+      );
+      root.style.setProperty(
+        "--app-canvas-height-mobile",
+        `${mobileCanvasHeight}px`,
+      );
+    }
+  };
+
+  window.addEventListener("resize", () => {
+    window.requestAnimationFrame(applyViewportSizing);
+  });
+  applyViewportSizing();
+
+  const emitPickerQuery = (action) => {
+    if (!pickerInput) return;
+    const query = pickerInput.value || "";
+    window.dispatchEvent(
+      new CustomEvent("vizmat-picker-query", {
+        detail: {
+          query,
+          action,
+        },
+      }),
+    );
+  };
+
+  if (pickerInput) {
+    window.addEventListener("vizmat-structure-picker-open", () => {
+      pickerOpen = true;
+      pickerInput.value = "";
+      try {
+        pickerInput.focus({ preventScroll: true });
+      } catch (error) {
+        pickerInput.focus();
+        window.scrollTo(0, 0);
+      }
+      emitPickerQuery("change");
+    });
+
+    window.addEventListener("vizmat-structure-picker-close", () => {
+      pickerOpen = false;
+      pickerInput.blur();
+      pickerInput.value = "";
+      applyViewportSizing();
+    });
+
+    pickerInput.addEventListener("input", () => emitPickerQuery("change"));
+    pickerInput.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        emitPickerQuery("submit");
+        event.stopPropagation();
+      }
+    });
+  }
+
+  const emitTouchGesture = (gesture) => {
+    window.dispatchEvent(
+      new CustomEvent("vizmat-touch-gesture", {
+        detail: gesture,
+      }),
+    );
+  };
+
+  const toVec = (touch) => ({ x: touch.clientX, y: touch.clientY });
+
+  const touchPanState = {
+    one: null,
+    two: {
+      active: false,
+      midpoint: null,
+      distance: null,
+    },
+  };
+
+  const getMidpoint = (a, b) => ({
+    x: (a.x + b.x) * 0.5,
+    y: (a.y + b.y) * 0.5,
+  });
+
+  const getDistance = (a, b) => {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return Math.hypot(dx, dy);
+  };
+
+  const clearTouchState = () => {
+    touchPanState.one = null;
+    touchPanState.two = {
+      active: false,
+      midpoint: null,
+      distance: null,
+    };
+  };
+
+  const emitIf = (condition, payload) => {
+    if (!condition) return false;
+    emitTouchGesture(payload);
+    return true;
+  };
+
+  if (canvas) {
+    canvas.style.touchAction = "none";
+
+    if (window.PointerEvent) {
+      const pointerState = new Map();
+
+      const removePointer = (event) => {
+        if (event.pointerType !== "touch") return;
+        if (!event.currentTarget || !pointerState.has(event.pointerId)) return;
+        pointerState.delete(event.pointerId);
+
+        if (pointerState.size === 0) {
+          clearTouchState();
+          return;
+        }
+
+        if (pointerState.size === 1) {
+          touchPanState.one = [...pointerState.values()][0];
+          touchPanState.two = {
+            active: false,
+            midpoint: null,
+            distance: null,
+          };
+          return;
+        }
+
+        const points = [...pointerState.values()];
+        touchPanState.two = {
+          active: true,
+          midpoint: getMidpoint(points[0], points[1]),
+          distance: getDistance(points[0], points[1]),
+        };
+      };
+
+      const updateSinglePointer = (point) => {
+        if (!touchPanState.one) {
+          touchPanState.one = point;
+          return;
+        }
+
+        const dx = point.x - touchPanState.one.x;
+        const dy = point.y - touchPanState.one.y;
+        const emitted = emitIf(dx !== 0 || dy !== 0, {
+          gesture: "Rotate",
+          dx,
+          dy,
+          scale_delta: 0,
+        });
+        if (emitted) {
+          touchPanState.one = point;
+        }
+      };
+
+      const updateTwoPointer = (a, b) => {
+        if (!touchPanState.two.active) {
+          touchPanState.two = {
+            active: true,
+            midpoint: getMidpoint(a, b),
+            distance: getDistance(a, b),
+          };
+          return;
+        }
+
+        const midpoint = getMidpoint(a, b);
+        const distance = getDistance(a, b);
+        const panDx = midpoint.x - touchPanState.two.midpoint.x;
+        const panDy = midpoint.y - touchPanState.two.midpoint.y;
+        const scaleDelta =
+          touchPanState.two.distance > 0
+            ? (distance - touchPanState.two.distance) / touchPanState.two.distance
+            : 0;
+
+        const emitted = emitIf(panDx !== 0 || panDy !== 0 || scaleDelta !== 0, {
+          gesture: "TwoFinger",
+          dx: panDx,
+          dy: panDy,
+          scale_delta: scaleDelta,
+        });
+
+        if (emitted) {
+          touchPanState.two.midpoint = midpoint;
+          touchPanState.two.distance = distance;
+        }
+      };
+
+      canvas.addEventListener(
+        "pointerdown",
+        (event) => {
+          if (event.pointerType !== "touch") return;
+          if (!event.target) return;
+          const point = toVec(event);
+          pointerState.set(event.pointerId, point);
+          event.currentTarget.setPointerCapture(event.pointerId);
+          touchPanState.one = point;
+          touchPanState.two = {
+            active: false,
+            midpoint: null,
+            distance: null,
+          };
+          event.preventDefault();
+        },
+        { passive: false },
+      );
+
+      canvas.addEventListener(
+        "pointermove",
+        (event) => {
+          if (event.pointerType !== "touch") return;
+          if (!pointerState.has(event.pointerId)) return;
+
+          const point = toVec(event);
+          pointerState.set(event.pointerId, point);
+
+          if (pointerState.size === 1) {
+            updateSinglePointer(point);
+          } else if (pointerState.size >= 2) {
+            const points = [...pointerState.values()];
+            const a = points[0];
+            const b = points[1];
+            updateTwoPointer(a, b);
+          }
+
+          event.preventDefault();
+        },
+        { passive: false },
+      );
+
+      canvas.addEventListener(
+        "pointerup",
+        removePointer,
+        { passive: false },
+      );
+      canvas.addEventListener("pointercancel", removePointer, {
+        passive: false,
+      });
+      canvas.addEventListener("pointerleave", removePointer, {
+        passive: false,
+      });
+      canvas.addEventListener("pointerout", removePointer, { passive: false });
+      canvas.addEventListener("pointerlostcapture", removePointer);
+    } else {
+      canvas.addEventListener(
+        "touchstart",
+        (event) => {
+          if (!event.target) return;
+          if (event.touches.length === 1) {
+            touchPanState.one = toVec(event.touches[0]);
+            touchPanState.two.active = false;
+          } else if (event.touches.length === 2) {
+            const a = toVec(event.touches[0]);
+            const b = toVec(event.touches[1]);
+            touchPanState.two = {
+              active: true,
+              midpoint: getMidpoint(a, b),
+              distance: getDistance(a, b),
+            };
+            touchPanState.one = null;
+          }
+          event.preventDefault();
+        },
+        { passive: false },
+      );
+
+      canvas.addEventListener(
+        "touchmove",
+        (event) => {
+          if (event.touches.length === 1 && touchPanState.one) {
+            const current = toVec(event.touches[0]);
+            const dx = current.x - touchPanState.one.x;
+            const dy = current.y - touchPanState.one.y;
+
+            if (dx !== 0 || dy !== 0) {
+              emitTouchGesture({
+                gesture: "Rotate",
+                dx,
+                dy,
+                scale_delta: 0,
+              });
+              touchPanState.one = current;
+            }
+            event.preventDefault();
+            return;
+          }
+
+          if (event.touches.length === 2 && touchPanState.two.active) {
+            const a = toVec(event.touches[0]);
+            const b = toVec(event.touches[1]);
+            const midpoint = getMidpoint(a, b);
+            const distance = getDistance(a, b);
+
+            const panDx = midpoint.x - touchPanState.two.midpoint.x;
+            const panDy = midpoint.y - touchPanState.two.midpoint.y;
+            const scaleDelta =
+              touchPanState.two.distance > 0
+                ? (distance - touchPanState.two.distance) / touchPanState.two.distance
+                : 0;
+
+            if (panDx !== 0 || panDy !== 0 || scaleDelta !== 0) {
+              emitTouchGesture({
+                gesture: "TwoFinger",
+                dx: panDx,
+                dy: panDy,
+                scale_delta: scaleDelta,
+              });
+              touchPanState.two.midpoint = midpoint;
+              touchPanState.two.distance = distance;
+            }
+
+            event.preventDefault();
+          }
+        },
+        { passive: false },
+      );
+    }
+
+    const clearTouch = () => clearTouchState();
+    canvas.addEventListener("touchend", clearTouch, { passive: false });
+    canvas.addEventListener("touchcancel", clearTouch, { passive: false });
+    canvas.addEventListener("touchleave", clearTouch, { passive: false });
+  }
+
   if (canvas) {
     // Keep RMB free for in-app panning instead of opening browser context menu.
     canvas.addEventListener("contextmenu", (event) => event.preventDefault());
@@ -16,6 +363,44 @@
     window.setTimeout(() => loader.remove(), 260);
   };
 
+  const setStatus = (message) => {
+    if (status) {
+      status.textContent = message;
+    }
+  };
+
+  const startApp = () => {
+    const bindings = window.wasmBindings;
+    if (!bindings || typeof bindings.start !== "function") {
+      setStatus("Waiting for WebAssembly bindings...");
+      return false;
+    }
+
+    try {
+      bindings.start();
+      hideLoader();
+      return true;
+    } catch (error) {
+      console.error("Failed to start WASM app:", error);
+      setStatus("Failed to start WebAssembly app.");
+      return false;
+    }
+  };
+
+  // Trunk injects the WASM module and then fires this event.
+  window.addEventListener(
+    "TrunkApplicationStarted",
+    () => {
+      startApp();
+    },
+    { once: true },
+  );
+
+  // If Trunk fired before this script loaded, start immediately.
+  if (window.wasmBindings?.start) {
+    startApp();
+  }
+
   // Trunk injects a startup script and emits this event after WASM init.
   // If the event fired before this listener was added, hide immediately.
   if (window.wasmBindings) {
diff --git a/vizmat-app/style.css b/vizmat-app/style.css
index 584d4b3..35b9134 100644
--- a/vizmat-app/style.css
+++ b/vizmat-app/style.css
@@ -20,6 +20,9 @@
     #01040a 100%
   );
   --canvas-bg: #030812;
+  --app-viewport-height: 100vh;
+  --app-canvas-height-desktop: min(80vh, 900px);
+  --app-canvas-height-mobile: min(82vh, 900px);
 }
 html[data-theme="light"] {
   --bg: #f7f8fb;
@@ -46,7 +49,7 @@ html[data-theme="light"] {
 }
 html, body {
   width: 100%;
-  height: 100%;
+  height: var(--app-viewport-height);
   touch-action: none;
   overscroll-behavior: none;
   user-select: none;
@@ -143,7 +146,7 @@ canvas {
   top: 50%;
   transform: translate(-50%, -50%);
   width: min(80vw, 1400px);
-  height: min(80vh, 900px);
+  height: var(--app-canvas-height-desktop);
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid var(--line);
@@ -154,6 +157,23 @@ canvas {
   user-select: none;
   -webkit-user-select: none;
 }
+#picker-keyboard-input {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: transparent;
+  caret-color: transparent;
+  z-index: 9999;
+  pointer-events: none;
+}
 .loader {
   position: fixed;
   inset: 0;
@@ -218,13 +238,21 @@ canvas {
   }
 }
 @media (max-width: 720px) {
+  html,
+  body {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+  }
   .site-title {
     max-width: 66vw;
     line-height: 1.25;
   }
   .canvas-shell {
     width: 94vw;
-    height: 82vh;
+    height: var(--app-canvas-height-mobile);
+    top: 28px;
+    transform: translateX(-50%);
     border-radius: 10px;
   }
   header {
@@ -239,3 +267,7 @@ canvas {
     font-size: 0.66rem;
   }
 }
+
+body.picker-keyboard-open {
+  overflow: hidden;
+}
diff --git a/vizmat-core/src/lib.rs b/vizmat-core/src/lib.rs
index 941ceae..44059b2 100644
--- a/vizmat-core/src/lib.rs
+++ b/vizmat-core/src/lib.rs
@@ -32,18 +32,22 @@ use crate::structure::{
     Crystal, UpdateStructure,
 };
 use crate::ui::{
-    apply_bond_tolerance_debounce, apply_theme_to_atom_hover_panel, apply_theme_to_hud,
-    apply_theme_to_startup_screen, auto_reset_view_on_crystal_change, bond_tolerance_controls,
-    camera_controls, cleanup_startup_screen, color_mode_button, handle_catalog_load_results,
-    handle_load_default_button, handle_open_file_button, hide_non_startup_controls,
-    refresh_structure_picker_panel, reset_camera_button_interaction, setup_cameras, setup_file_ui,
-    setup_light, setup_startup_screen, show_non_startup_controls, structure_picker_keyboard_search,
-    structure_picker_result_buttons, structure_picker_toggle_button, sync_atom_selection_highlight,
-    sync_color_mode_label, sync_gizmo_axis_rotation, toggle_light_attachment, toggle_theme_button,
-    transition_to_running_on_structure_loaded, update_atom_hover_cache, update_atom_hover_label,
-    update_bond_order_legend, update_color_mode_availability, update_file_ui,
-    update_gizmo_viewport, update_scene, update_selected_atom_from_click,
-    update_structure_loading_overlay, AppUiState, CatalogLoadChannel, TouchGestureState,
+    apply_bond_tolerance_debounce, apply_structure_picker_query_text,
+    apply_theme_to_atom_hover_panel, apply_theme_to_hud, apply_theme_to_startup_screen,
+    auto_reset_view_on_crystal_change, blink_structure_picker_query_caret, bond_tolerance_controls,
+    camera_controls, cleanup_startup_screen, color_mode_button, filtered_structure_entries,
+    handle_catalog_load_results, handle_load_default_button, handle_open_file_button,
+    hide_non_startup_controls, refresh_structure_picker_panel, reset_camera_button_interaction,
+    set_structure_picker_keyboard_active, setup_cameras, setup_file_ui, setup_light,
+    setup_startup_screen, show_non_startup_controls, structure_picker_keyboard_search,
+    structure_picker_result_buttons, structure_picker_scroll, structure_picker_toggle_button,
+    sync_atom_selection_highlight, sync_color_mode_label, sync_gizmo_axis_rotation,
+    toggle_light_attachment, toggle_theme_button, transition_to_running_on_structure_loaded,
+    update_atom_hover_cache, update_atom_hover_label, update_bond_order_legend,
+    update_color_mode_availability, update_file_ui, update_gizmo_viewport, update_scene,
+    update_selected_atom_from_click, update_structure_loading_overlay,
+    update_structure_picker_scroll_indicator, AppUiState, CatalogLoadChannel,
+    StructurePickerCaretState, StructurePickerState, TouchGestureState,
 };
 use crate::ui::{setup_buttons, spawn_axis};
 
@@ -89,6 +93,10 @@ pub enum WebEvent {
         dy: f32,
         scale_delta: f32,
     },
+    StructurePickerQuery {
+        query: String,
+        submit: bool,
+    },
 }
 
 #[derive(Clone, Copy, Debug)]
@@ -133,6 +141,13 @@ struct TouchGesturePayload {
     scale_delta: f32,
 }
 
+#[allow(dead_code)]
+#[derive(serde::Deserialize)]
+struct StructurePickerQueryPayload {
+    query: String,
+    action: String,
+}
+
 pub struct WebPlugin {
     #[cfg_attr(not(target_family = "wasm"), allow(dead_code))]
     pub dom_drop_element_id: String,
@@ -174,6 +189,7 @@ impl Plugin for WebPlugin {
             set_sender(sender);
             register_drop(&self.dom_drop_element_id).unwrap();
             register_touch_gesture_listener().unwrap();
+            register_structure_picker_query_listener().unwrap();
         }
     }
 }
@@ -378,6 +394,44 @@ fn register_touch_gesture_listener() -> Option<()> {
     Some(())
 }
 
+#[cfg(target_arch = "wasm32")]
+fn register_structure_picker_query_listener() -> Option<()> {
+    let document = gloo::utils::document();
+    let window = document.default_view()?;
+
+    EventListener::new_with_options(
+        &window,
+        "vizmat-picker-query",
+        EventListenerOptions::enable_prevent_default(),
+        move |event| {
+            let event: CustomEvent = match event.clone().dyn_into() {
+                Ok(event) => event,
+                Err(err) => {
+                    warn!("Ignoring invalid structure-picker-query event: {err:?}");
+                    return;
+                }
+            };
+
+            let payload: StructurePickerQueryPayload = match event.detail().into_serde() {
+                Ok(payload) => payload,
+                Err(err) => {
+                    warn!("Ignoring structure-picker-query payload parse failure: {err}");
+                    return;
+                }
+            };
+
+            let submit = payload.action.eq_ignore_ascii_case("submit");
+            send_event(WebEvent::StructurePickerQuery {
+                query: payload.query,
+                submit,
+            });
+        },
+    )
+    .forget();
+
+    Some(())
+}
+
 /// Shared function for Bevy app setup
 pub fn run_app() {
     App::new()
@@ -457,10 +511,13 @@ pub fn run_app() {
         )
         .add_systems(Update, structure_picker_toggle_button)
         .add_systems(Update, structure_picker_keyboard_search)
+        .add_systems(Update, blink_structure_picker_query_caret)
         .add_systems(
             Update,
             refresh_structure_picker_panel.after(structure_picker_keyboard_search),
         )
+        .add_systems(Update, update_structure_picker_scroll_indicator)
+        .add_systems(Update, structure_picker_scroll)
         .add_systems(Update, structure_picker_result_buttons)
         .add_systems(
             Update,
@@ -529,12 +586,16 @@ pub fn run_app() {
         .run();
 }
 
+#[allow(clippy::too_many_arguments)]
 fn web_event_observer(
     trigger: Trigger<WebEvent>,
     mut file_drag_drop: ResMut<FileDragDrop>,
     mut next_ui_state: ResMut<NextState<AppUiState>>,
     mut commands: Commands,
     mut touch_gesture_state: ResMut<TouchGestureState>,
+    mut picker: ResMut<StructurePickerState>,
+    mut picker_caret_state: ResMut<StructurePickerCaretState>,
+    catalog_channel: Option<Res<CatalogLoadChannel>>,
 ) {
     match trigger.event() {
         WebEvent::Drop {
@@ -591,6 +652,28 @@ fn web_event_observer(
                 touch_gesture_state.zoom += *scale_delta;
             }
         },
+        WebEvent::StructurePickerQuery { query, submit } => {
+            apply_structure_picker_query_text(&mut picker, &mut picker_caret_state, query.clone());
+
+            if !picker.visible {
+                picker.visible = true;
+                set_structure_picker_keyboard_active(true);
+            }
+
+            if !submit {
+                return;
+            }
+
+            if let Some(first) = filtered_structure_entries(&picker).first().cloned() {
+                crate::ui::load_structure_from_catalog_path(
+                    &first,
+                    &mut file_drag_drop,
+                    catalog_channel.as_deref(),
+                );
+                picker.visible = false;
+                set_structure_picker_keyboard_active(false);
+            }
+        }
     }
 }
 
diff --git a/vizmat-core/src/ui.rs b/vizmat-core/src/ui.rs
index 3bcd2b0..8ed62be 100644
--- a/vizmat-core/src/ui.rs
+++ b/vizmat-core/src/ui.rs
@@ -4,9 +4,8 @@ use std::collections::{BTreeSet, HashMap, HashSet, VecDeque};
 use std::path::PathBuf;
 
 use bevy::ecs::system::SystemParam;
-use bevy::input::keyboard::{Key, KeyboardInput};
 use bevy::input::mouse::{MouseMotion, MouseWheel};
-use bevy::input::ButtonState;
+use bevy::picking::hover::HoverMap;
 use bevy::prelude::*;
 use bevy::render::camera::Viewport;
 use bevy::render::view::RenderLayers;
@@ -33,6 +32,17 @@ use crate::structure::{
     BondOrder, Crystal,
 };
 
+mod picker;
+pub(crate) use picker::{
+    apply_structure_picker_query_text, blink_structure_picker_query_caret,
+    filtered_structure_entries, parse_embedded_structure_entries, refresh_structure_picker_panel,
+    set_structure_picker_keyboard_active, setup_structure_picker_panel,
+    structure_picker_keyboard_search, structure_picker_result_buttons, structure_picker_scroll,
+    structure_picker_toggle_button, update_structure_picker_scroll_indicator,
+    StructurePickerCaretState, StructurePickerResultsScroll, StructurePickerSelectionState,
+    StructurePickerState, StructurePickerToggleButton,
+};
+
 const LAYER_GIZMO: RenderLayers = RenderLayers::layer(1);
 const LAYER_CANVAS: RenderLayers = RenderLayers::layer(0);
 const GIZMO_VIEWPORT_SIZE_PX: u32 = 200;
@@ -97,6 +107,37 @@ pub(crate) struct GizmoCamera;
 #[derive(Component)]
 pub(crate) struct FileUploadText;
 
+#[derive(Component)]
+pub(crate) struct FileUploadPopupRoot;
+
+#[derive(Component)]
+pub(crate) struct FileUploadPopupDismissButton;
+
+#[derive(Component)]
+pub(crate) struct FileUploadPopupBackdrop;
+
+#[derive(Component)]
+pub(crate) struct FileUploadPopupPanel;
+
+#[derive(Resource)]
+pub(crate) struct FileUploadPopupState {
+    hide_after: Option<f64>,
+    dismissed: bool,
+    last_status_message: String,
+    last_status_kind: FileStatusKind,
+}
+
+impl Default for FileUploadPopupState {
+    fn default() -> Self {
+        Self {
+            hide_after: None,
+            dismissed: true,
+            last_status_message: String::new(),
+            last_status_kind: FileStatusKind::Info,
+        }
+    }
+}
+
 // Component for load default button
 #[derive(Component)]
 pub(crate) struct LoadDefaultButton;
@@ -111,40 +152,28 @@ pub(crate) struct ThemeToggleButton;
 pub(crate) struct ThemeToggleIcon;
 
 #[derive(Component)]
-pub(crate) struct StructurePickerToggleButton;
+pub(crate) struct HudTopBar;
 
 #[derive(Component)]
-pub(crate) struct StructurePickerPanel;
+pub(crate) struct HudBottomBar;
 
 #[derive(Component)]
-pub(crate) struct StructurePickerQueryText;
+pub(crate) struct HudButton;
 
 #[derive(Component)]
-pub(crate) struct StructurePickerResultsRoot;
-
-#[derive(Component, Clone)]
-pub(crate) struct StructurePickerResultButton {
-    pub(crate) path: String,
-}
-
-#[derive(Resource, Default)]
-pub(crate) struct StructurePickerState {
-    pub(crate) entries: Vec<String>,
-    pub(crate) query: String,
-    pub(crate) visible: bool,
-}
+pub(crate) struct HudButtonLabel;
 
 #[derive(Component)]
-pub(crate) struct HudTopBar;
+pub(crate) struct HudButtonIcon;
 
 #[derive(Component)]
-pub(crate) struct HudBottomBar;
+pub(crate) struct LoadStructureLabel;
 
 #[derive(Component)]
-pub(crate) struct HudButton;
+pub(crate) struct ResetCameraLabel;
 
 #[derive(Component)]
-pub(crate) struct HudButtonLabel;
+pub(crate) struct LightAttachmentLabel;
 
 #[derive(Component)]
 pub(crate) struct HudHelpText;
@@ -754,6 +783,7 @@ type HudBgQueries<'w, 's> = (
 
 type HudTextQueries<'w, 's> = (
     Query<'w, 's, &'static mut TextColor, With<HudButtonLabel>>,
+    Query<'w, 's, &'static mut TextColor, With<HudButtonIcon>>,
     Query<'w, 's, &'static mut TextColor, (With<FileUploadText>, Without<HudButtonLabel>)>,
     Query<'w, 's, &'static mut TextColor, With<HudHelpText>>,
     Query<'w, 's, &'static mut TextColor, With<HudLegendText>>,
@@ -815,33 +845,6 @@ type StructureLoadingNodeQueries<'w, 's> = (
     Query<'w, 's, &'static mut Node, With<StructureLoadingProgressFill>>,
 );
 
-fn parse_embedded_structure_entries() -> Vec<String> {
-    EMBEDDED_STRUCTURE_LIST
-        .lines()
-        .map(str::trim)
-        .filter(|line| !line.is_empty() && !line.starts_with('#'))
-        .map(ToOwned::to_owned)
-        .collect()
-}
-
-fn structure_matches_query(path: &str, query: &str) -> bool {
-    if query.trim().is_empty() {
-        return true;
-    }
-    path.to_ascii_lowercase()
-        .contains(&query.trim().to_ascii_lowercase())
-}
-
-fn filtered_structure_entries(state: &StructurePickerState) -> Vec<String> {
-    state
-        .entries
-        .iter()
-        .filter(|entry| structure_matches_query(entry, &state.query))
-        .take(12)
-        .cloned()
-        .collect()
-}
-
 #[cfg_attr(target_arch = "wasm32", allow(dead_code))]
 fn structures_local_dir() -> &'static str {
     option_env!("VIZMAT_STRUCTURES_LOCAL_DIR").unwrap_or(concat!(
@@ -1186,15 +1189,32 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
         query: String::new(),
         visible: false,
     });
+    commands.insert_resource(StructurePickerCaretState::default());
+    commands.insert_resource(StructurePickerSelectionState::default());
+    commands.insert_resource(FileUploadPopupState::default());
     let p = theme_palette(theme.mode);
     let is_mobile = {
         #[cfg(target_arch = "wasm32")]
         let is_mobile = window()
-            .and_then(|window| window.navigator().user_agent().ok())
-            .is_some_and(|ua| {
-                let ua = ua.to_lowercase();
-                ua.contains("mobile") || ua.contains("android") || ua.contains("iphone")
-            });
+            .and_then(|window| {
+                let ua = window
+                    .navigator()
+                    .user_agent()
+                    .ok()
+                    .unwrap_or_default()
+                    .to_lowercase();
+                let ua_matches_mobile = ua.contains("mobile")
+                    || ua.contains("android")
+                    || ua.contains("iphone")
+                    || ua.contains("ipad");
+                let width_is_small = window
+                    .inner_width()
+                    .ok()
+                    .and_then(|w| w.as_f64())
+                    .is_some_and(|w| w <= 768.0);
+                Some(ua_matches_mobile || width_is_small)
+            })
+            .unwrap_or(false);
 
         #[cfg(not(target_arch = "wasm32"))]
         let is_mobile = false;
@@ -1250,7 +1270,13 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                 row.spawn((
                     Button,
                     Node {
-                        padding: UiRect::axes(Val::Px(10.0), Val::Px(6.0)),
+                        padding: if is_mobile {
+                            UiRect::axes(Val::Px(8.0), Val::Px(5.0))
+                        } else {
+                            UiRect::axes(Val::Px(10.0), Val::Px(6.0))
+                        },
+                        width: if is_mobile { Val::Px(96.0) } else { Val::Auto },
+                        height: if is_mobile { Val::Px(30.0) } else { Val::Auto },
                         border: UiRect::all(Val::Px(1.0)),
                         ..default()
                     },
@@ -1261,21 +1287,39 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                 ))
                 .with_children(|button| {
                     button.spawn((
-                        Text::new("Load Structure"),
+                        Text::new(if is_mobile { "Load" } else { "Load Structure" }),
                         TextFont {
                             font: default(),
-                            font_size: 12.0,
+                            font_size: if is_mobile { 11.0 } else { 12.0 },
                             ..default()
                         },
+                        if is_mobile {
+                            TextLayout::new_with_no_wrap()
+                        } else {
+                            default()
+                        },
                         TextColor(p.text),
                         HudButtonLabel,
+                        LoadStructureLabel,
                     ));
                 });
 
                 row.spawn((
                     Button,
                     Node {
-                        padding: UiRect::axes(Val::Px(10.0), Val::Px(6.0)),
+                        padding: if is_mobile {
+                            UiRect::ZERO
+                        } else {
+                            UiRect::axes(Val::Px(10.0), Val::Px(6.0))
+                        },
+                        width: if is_mobile { Val::Px(30.0) } else { Val::Auto },
+                        height: if is_mobile { Val::Px(30.0) } else { Val::Auto },
+                        justify_content: if is_mobile {
+                            JustifyContent::Center
+                        } else {
+                            JustifyContent::FlexStart
+                        },
+                        align_items: AlignItems::Center,
                         border: UiRect::all(Val::Px(1.0)),
                         ..default()
                     },
@@ -1287,12 +1331,38 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                     HudButton,
                 ))
                 .with_children(|button| {
+                    button.spawn((
+                        Text::new("\u{f53f}"),
+                        TextFont {
+                            font: icon_font.clone(),
+                            font_size: 16.0,
+                            ..default()
+                        },
+                        TextColor(p.text),
+                        Node {
+                            display: if is_mobile {
+                                Display::Flex
+                            } else {
+                                Display::None
+                            },
+                            ..default()
+                        },
+                        HudButtonIcon,
+                    ));
                     button.spawn((
                         Text::new("Color: Element"),
                         TextFont {
                             font_size: 12.0,
                             ..default()
                         },
+                        Node {
+                            display: if is_mobile {
+                                Display::None
+                            } else {
+                                Display::Flex
+                            },
+                            ..default()
+                        },
                         TextColor(p.text),
                         HudButtonLabel,
                         ColorModeLabel,
@@ -1302,7 +1372,19 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                 row.spawn((
                     Button,
                     Node {
-                        padding: UiRect::axes(Val::Px(10.0), Val::Px(6.0)),
+                        padding: if is_mobile {
+                            UiRect::ZERO
+                        } else {
+                            UiRect::axes(Val::Px(10.0), Val::Px(6.0))
+                        },
+                        width: if is_mobile { Val::Px(30.0) } else { Val::Auto },
+                        height: if is_mobile { Val::Px(30.0) } else { Val::Auto },
+                        justify_content: if is_mobile {
+                            JustifyContent::Center
+                        } else {
+                            JustifyContent::FlexStart
+                        },
+                        align_items: AlignItems::Center,
                         border: UiRect::all(Val::Px(1.0)),
                         ..default()
                     },
@@ -1314,6 +1396,24 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                     HudButton,
                 ))
                 .with_children(|button| {
+                    button.spawn((
+                        Text::new("\u{f021}"),
+                        TextFont {
+                            font: icon_font.clone(),
+                            font_size: 16.0,
+                            ..default()
+                        },
+                        TextColor(p.text),
+                        Node {
+                            display: if is_mobile {
+                                Display::Flex
+                            } else {
+                                Display::None
+                            },
+                            ..default()
+                        },
+                        HudButtonIcon,
+                    ));
                     button.spawn((
                         Text::new("Reset View"),
                         TextFont {
@@ -1321,15 +1421,36 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                             font_size: 12.0,
                             ..default()
                         },
+                        Node {
+                            display: if is_mobile {
+                                Display::None
+                            } else {
+                                Display::Flex
+                            },
+                            ..default()
+                        },
                         TextColor(p.text),
                         HudButtonLabel,
+                        ResetCameraLabel,
                     ));
                 });
 
                 row.spawn((
                     Button,
                     Node {
-                        padding: UiRect::axes(Val::Px(10.0), Val::Px(6.0)),
+                        padding: if is_mobile {
+                            UiRect::ZERO
+                        } else {
+                            UiRect::axes(Val::Px(10.0), Val::Px(6.0))
+                        },
+                        width: if is_mobile { Val::Px(30.0) } else { Val::Auto },
+                        height: if is_mobile { Val::Px(30.0) } else { Val::Auto },
+                        justify_content: if is_mobile {
+                            JustifyContent::Center
+                        } else {
+                            JustifyContent::FlexStart
+                        },
+                        align_items: AlignItems::Center,
                         border: UiRect::all(Val::Px(1.0)),
                         ..default()
                     },
@@ -1341,6 +1462,24 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                     HudButton,
                 ))
                 .with_children(|button| {
+                    button.spawn((
+                        Text::new("\u{f0eb}"),
+                        TextFont {
+                            font: icon_font.clone(),
+                            font_size: 16.0,
+                            ..default()
+                        },
+                        TextColor(p.text),
+                        Node {
+                            display: if is_mobile {
+                                Display::Flex
+                            } else {
+                                Display::None
+                            },
+                            ..default()
+                        },
+                        HudButtonIcon,
+                    ));
                     button.spawn((
                         Text::new("Light: Static"),
                         TextFont {
@@ -1348,15 +1487,36 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                             font_size: 12.0,
                             ..default()
                         },
+                        Node {
+                            display: if is_mobile {
+                                Display::None
+                            } else {
+                                Display::Flex
+                            },
+                            ..default()
+                        },
                         TextColor(p.text),
                         HudButtonLabel,
+                        LightAttachmentLabel,
                     ));
                 });
 
                 row.spawn((
                     Button,
                     Node {
-                        padding: UiRect::axes(Val::Px(10.0), Val::Px(6.0)),
+                        padding: if is_mobile {
+                            UiRect::ZERO
+                        } else {
+                            UiRect::axes(Val::Px(10.0), Val::Px(6.0))
+                        },
+                        width: if is_mobile { Val::Px(30.0) } else { Val::Auto },
+                        height: if is_mobile { Val::Px(30.0) } else { Val::Auto },
+                        justify_content: if is_mobile {
+                            JustifyContent::Center
+                        } else {
+                            JustifyContent::FlexStart
+                        },
+                        align_items: AlignItems::Center,
                         border: UiRect::all(Val::Px(1.0)),
                         ..default()
                     },
@@ -1369,11 +1529,37 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                 ))
                 .with_children(|button| {
                     button.spawn((
-                        Text::new("Bonds: On"),
+                        Text::new("\u{f0c1}"),
+                        TextFont {
+                            font: icon_font.clone(),
+                            font_size: 16.0,
+                            ..default()
+                        },
+                        TextColor(p.text),
+                        Node {
+                            display: if is_mobile {
+                                Display::Flex
+                            } else {
+                                Display::None
+                            },
+                            ..default()
+                        },
+                        HudButtonIcon,
+                    ));
+                    button.spawn((
+                        Text::new("Bonds: Off"),
                         TextFont {
                             font_size: 12.0,
                             ..default()
                         },
+                        Node {
+                            display: if is_mobile {
+                                Display::None
+                            } else {
+                                Display::Flex
+                            },
+                            ..default()
+                        },
                         TextColor(p.text),
                         HudButtonLabel,
                         BondToggleLabel,
@@ -1432,18 +1618,6 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                 BackgroundColor(Color::NONE),
             ))
             .with_children(|right| {
-                right.spawn((
-                    Text::new(format!("Drop {} file", SUPPORTED_EXTENSIONS_HELP)),
-                    TextFont {
-                        font_size: 12.0,
-                        ..default()
-                    },
-                    Visibility::Visible,
-                    TextColor(p.text),
-                    FileUploadText,
-                    HiddenOnStartup,
-                ));
-
                 right
                     .spawn((
                         Button,
@@ -1477,6 +1651,96 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
             });
         });
 
+    commands
+        .spawn((
+            Node {
+                position_type: PositionType::Absolute,
+                top: Val::Px(0.0),
+                left: Val::Px(0.0),
+                right: Val::Px(0.0),
+                bottom: Val::Px(0.0),
+                display: Display::None,
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                ..default()
+            },
+            GlobalZIndex(25),
+            FocusPolicy::Pass,
+            BackgroundColor(Color::NONE),
+            FileUploadPopupRoot,
+        ))
+        .with_children(|overlay| {
+            overlay.spawn((
+                Button,
+                Node {
+                    position_type: PositionType::Absolute,
+                    top: Val::Px(0.0),
+                    left: Val::Px(0.0),
+                    right: Val::Px(0.0),
+                    bottom: Val::Px(0.0),
+                    ..default()
+                },
+                BackgroundColor(Color::NONE),
+                FileUploadPopupBackdrop,
+            ));
+
+            overlay
+                .spawn((
+                    Node {
+                        max_width: Val::Px(520.0),
+                        flex_direction: FlexDirection::Row,
+                        align_items: AlignItems::Center,
+                        column_gap: Val::Px(8.0),
+                        padding: UiRect::axes(Val::Px(12.0), Val::Px(8.0)),
+                        border: UiRect::all(Val::Px(1.0)),
+                        ..default()
+                    },
+                    BorderColor(p.border),
+                    BackgroundColor(p.bar_bg_alt),
+                    BorderRadius::all(Val::Px(8.0)),
+                    TextLayout::new_with_justify(JustifyText::Center),
+                    FileUploadPopupPanel,
+                ))
+                .with_children(|panel| {
+                    panel.spawn((
+                        Text::new(format!("Drop {} file", SUPPORTED_EXTENSIONS_HELP)),
+                        TextFont {
+                            font_size: 12.0,
+                            ..default()
+                        },
+                        TextColor(p.text),
+                        FileUploadText,
+                    ));
+
+                    panel
+                        .spawn((
+                            Button,
+                            Node {
+                                width: Val::Px(18.0),
+                                height: Val::Px(18.0),
+                                margin: UiRect::left(Val::Px(8.0)),
+                                justify_content: JustifyContent::Center,
+                                align_items: AlignItems::Center,
+                                border: UiRect::all(Val::Px(1.0)),
+                                ..default()
+                            },
+                            BorderColor(p.border),
+                            BackgroundColor(p.button_bg),
+                            FileUploadPopupDismissButton,
+                        ))
+                        .with_children(|button| {
+                            button.spawn((
+                                Text::new("×"),
+                                TextFont {
+                                    font_size: 12.0,
+                                    ..default()
+                                },
+                                TextColor(p.text),
+                            ));
+                        });
+                });
+        });
+
     commands
         .spawn((
             Node {
@@ -1543,6 +1807,7 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                                 StructureLoadingProgressFill,
                             ));
                         });
+
                     panel.spawn((
                         Text::new("Fetching structure..."),
                         TextFont {
@@ -1555,55 +1820,7 @@ pub(crate) fn setup_file_ui(mut commands: Commands, mut font_assets: ResMut<Asse
                 });
         });
 
-    commands
-        .spawn((
-            Node {
-                position_type: PositionType::Absolute,
-                top: Val::Px(54.0),
-                left: Val::Px(10.0),
-                width: Val::Px(360.0),
-                max_height: Val::Px(320.0),
-                display: Display::None,
-                flex_direction: FlexDirection::Column,
-                row_gap: Val::Px(6.0),
-                padding: UiRect::all(Val::Px(8.0)),
-                border: UiRect::all(Val::Px(1.0)),
-                ..default()
-            },
-            BorderColor(p.border),
-            BackgroundColor(p.bar_bg_alt),
-            StructurePickerPanel,
-        ))
-        .with_children(|panel| {
-            panel.spawn((
-                Text::new("Search structures:"),
-                TextFont {
-                    font_size: 11.0,
-                    ..default()
-                },
-                TextColor(p.text_muted),
-                HudHelpText,
-            ));
-            panel.spawn((
-                Text::new(""),
-                TextFont {
-                    font_size: 12.0,
-                    ..default()
-                },
-                TextColor(p.text),
-                StructurePickerQueryText,
-            ));
-            panel.spawn((
-                Node {
-                    flex_direction: FlexDirection::Column,
-                    row_gap: Val::Px(4.0),
-                    overflow: Overflow::clip_y(),
-                    ..default()
-                },
-                BackgroundColor(Color::NONE),
-                StructurePickerResultsRoot,
-            ));
-        });
+    setup_structure_picker_panel(&mut commands, &theme, &icon_font);
 
     commands
         .spawn((
@@ -1718,11 +1935,65 @@ fn status_message_for_hud(status: &str, kind: FileStatusKind) -> String {
     }
 }
 
+#[allow(clippy::too_many_arguments)]
 pub(crate) fn update_file_ui(
     file_drag_drop: Res<crate::io::FileDragDrop>,
     theme: Res<UiTheme>,
+    time: Res<Time>,
+    mut popup_state: ResMut<FileUploadPopupState>,
+    mut popup_root_query: Query<&mut Node, With<FileUploadPopupRoot>>,
+    popup_dismiss: Query<&Interaction, (Changed<Interaction>, With<FileUploadPopupDismissButton>)>,
+    popup_backdrop: Query<&Interaction, (Changed<Interaction>, With<FileUploadPopupBackdrop>)>,
     mut text_query: Query<(&mut Text, &mut TextColor), With<FileUploadText>>,
 ) {
+    if popup_state.last_status_message != file_drag_drop.status_message
+        || popup_state.last_status_kind != file_drag_drop.status_kind
+    {
+        popup_state.last_status_message = file_drag_drop.status_message.clone();
+        popup_state.last_status_kind = file_drag_drop.status_kind;
+        popup_state.dismissed = false;
+        popup_state.hide_after = if matches!(file_drag_drop.status_kind, FileStatusKind::Success) {
+            Some(time.elapsed_secs_f64() + 3.0)
+        } else {
+            None
+        };
+    }
+
+    if !popup_state.dismissed {
+        for interaction in popup_dismiss.iter() {
+            if *interaction == Interaction::Pressed {
+                popup_state.dismissed = true;
+                popup_state.hide_after = None;
+            }
+        }
+        for interaction in popup_backdrop.iter() {
+            if *interaction == Interaction::Pressed {
+                popup_state.dismissed = true;
+                popup_state.hide_after = None;
+            }
+        }
+    }
+
+    if let Some(hide_after) = popup_state.hide_after {
+        if time.elapsed_secs_f64() >= hide_after {
+            popup_state.dismissed = true;
+            popup_state.hide_after = None;
+        }
+    }
+
+    if file_drag_drop.status_message == format!("Drop {} file", SUPPORTED_EXTENSIONS_HELP) {
+        popup_state.dismissed = true;
+        popup_state.hide_after = None;
+    }
+
+    if let Ok(mut popup_root) = popup_root_query.single_mut() {
+        if popup_state.dismissed {
+            popup_root.display = Display::None;
+        } else {
+            popup_root.display = Display::Flex;
+        }
+    }
+
     if let Ok((mut text, mut color)) = text_query.single_mut() {
         **text = status_message_for_hud(&file_drag_drop.status_message, file_drag_drop.status_kind);
         *color = match file_drag_drop.status_kind {
@@ -1816,6 +2087,7 @@ pub(crate) fn bond_tolerance_controls(
         Query<&mut Node, With<BondToleranceSliderTrack>>,
         Query<&mut Node, With<BondToleranceFill>>,
     )>,
+    windows: Query<&Window>,
     theme: Res<UiTheme>,
     time: Res<Time>,
 ) {
@@ -1826,8 +2098,10 @@ pub(crate) fn bond_tolerance_controls(
     let slider_percent = |v: f32| ((v - MIN_TOLERANCE) / (MAX_TOLERANCE - MIN_TOLERANCE)) * 100.0;
     let value_from_slider =
         |x_norm: f32| MIN_TOLERANCE + x_norm.clamp(0.0, 1.0) * (MAX_TOLERANCE - MIN_TOLERANCE);
-    let using_file_bonds =
-        settings.enabled && crystal.as_deref().is_some_and(|c| c.has_explicit_bonds());
+    let has_file_bonds = crystal.as_deref().is_some_and(|c| c.has_explicit_bonds());
+    let using_file_bonds = settings.enabled && has_file_bonds;
+    let is_wide = windows.single().is_ok_and(|window| window.width() > 768.0);
+    let show_tolerance_controls = settings.enabled && is_wide && !has_file_bonds;
 
     for (interaction, mut color) in &mut interaction_queries.p0() {
         match *interaction {
@@ -1858,7 +2132,6 @@ pub(crate) fn bond_tolerance_controls(
         }
     }
 
-    let show_tolerance_controls = settings.enabled && !using_file_bonds;
     if let Ok(mut slider_track) = node_queries.p0().single_mut() {
         slider_track.display = if show_tolerance_controls {
             Display::Flex
@@ -1884,9 +2157,9 @@ pub(crate) fn bond_tolerance_controls(
         text.0 = if !settings.enabled {
             "Bonds: Off".into()
         } else if using_file_bonds {
-            "Bonds: On (File)".into()
+            "Bonds: File".into()
         } else {
-            "Bonds: On (Infer)".into()
+            "Bonds: Infer".into()
         };
     }
     if let Ok(mut fill) = node_queries.p1().single_mut() {
@@ -2046,11 +2319,11 @@ pub(crate) fn apply_theme_to_hud(
     for mut color in &mut themed.text.p0() {
         *color = TextColor(p.text);
     }
-    if let Ok(mut color) = themed.text.p1().single_mut() {
+    for mut color in &mut themed.text.p1() {
         *color = TextColor(p.text);
     }
-    for mut color in &mut themed.text.p2() {
-        *color = TextColor(p.text_muted);
+    if let Ok(mut color) = themed.text.p2().single_mut() {
+        *color = TextColor(p.text);
     }
     for mut color in &mut themed.text.p3() {
         *color = TextColor(p.text_muted);
@@ -2058,6 +2331,9 @@ pub(crate) fn apply_theme_to_hud(
     for mut color in &mut themed.text.p4() {
         *color = TextColor(p.text_muted);
     }
+    for mut color in &mut themed.text.p5() {
+        *color = TextColor(p.text_muted);
+    }
 }
 
 pub(crate) fn apply_theme_to_startup_screen(
@@ -2199,7 +2475,7 @@ pub fn clear_old_atoms(mut commands: Commands, atom_query: Query<Entity, With<At
     }
 }
 
-fn load_structure_from_catalog_path(
+pub(crate) fn load_structure_from_catalog_path(
     path: &str,
     file_drag_drop: &mut crate::io::FileDragDrop,
     catalog_channel: Option<&CatalogLoadChannel>,
@@ -2341,194 +2617,6 @@ fn load_structure_from_catalog_path(
     }
 }
 
-#[allow(clippy::type_complexity)]
-pub(crate) fn structure_picker_toggle_button(
-    mut interaction_query: Query<
-        (&Interaction, &mut BackgroundColor),
-        (Changed<Interaction>, With<StructurePickerToggleButton>),
-    >,
-    mut picker: ResMut<StructurePickerState>,
-    theme: Res<UiTheme>,
-) {
-    for (interaction, mut color) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
-                picker.visible = !picker.visible;
-                if picker.visible {
-                    picker.query.clear();
-                }
-                *color = BackgroundColor(themed_button_bg(theme.mode, Interaction::Pressed));
-            }
-            Interaction::Hovered => {
-                *color = BackgroundColor(themed_button_bg(theme.mode, Interaction::Hovered));
-            }
-            Interaction::None => {
-                *color = BackgroundColor(themed_button_bg(theme.mode, Interaction::None));
-            }
-        }
-    }
-}
-
-pub(crate) fn structure_picker_keyboard_search(
-    mut keyboard_events: EventReader<KeyboardInput>,
-    mut picker: ResMut<StructurePickerState>,
-    mut file_drag_drop: ResMut<crate::io::FileDragDrop>,
-    catalog_channel: Option<Res<CatalogLoadChannel>>,
-) {
-    if !picker.visible {
-        return;
-    }
-
-    for event in keyboard_events.read() {
-        if event.state != ButtonState::Pressed {
-            continue;
-        }
-
-        match &event.logical_key {
-            Key::Escape => {
-                picker.visible = false;
-            }
-            Key::Backspace => {
-                picker.query.pop();
-            }
-            Key::Enter => {
-                if let Some(first) = filtered_structure_entries(&picker).first().cloned() {
-                    load_structure_from_catalog_path(
-                        &first,
-                        &mut file_drag_drop,
-                        catalog_channel.as_deref(),
-                    );
-                    picker.visible = false;
-                }
-            }
-            Key::Character(_) => {
-                if let Some(text) = &event.text {
-                    // Keep search input simple and predictable for all layouts.
-                    if text.chars().all(|ch| !ch.is_control()) {
-                        picker.query.push_str(text);
-                    }
-                }
-            }
-            _ => {}
-        }
-    }
-}
-
-pub(crate) fn refresh_structure_picker_panel(
-    mut commands: Commands,
-    picker: Res<StructurePickerState>,
-    mut panel_query: Query<&mut Node, With<StructurePickerPanel>>,
-    mut query_text: Query<&mut Text, With<StructurePickerQueryText>>,
-    mut results_root_query: Query<(Entity, Option<&Children>), With<StructurePickerResultsRoot>>,
-    theme: Res<UiTheme>,
-) {
-    let Ok(mut panel_node) = panel_query.single_mut() else {
-        return;
-    };
-    panel_node.display = if picker.visible {
-        Display::Flex
-    } else {
-        Display::None
-    };
-
-    if !picker.visible {
-        return;
-    }
-
-    if let Ok(mut text) = query_text.single_mut() {
-        text.0 = if picker.query.is_empty() {
-            "Type to filter (Enter to load first match, Esc to close)".to_string()
-        } else {
-            format!("query: {}", picker.query)
-        };
-    }
-
-    if !picker.is_changed() && !theme.is_changed() {
-        return;
-    }
-
-    let Ok((results_root, maybe_children)) = results_root_query.single_mut() else {
-        return;
-    };
-    if let Some(children) = maybe_children {
-        for child in children.iter() {
-            commands.entity(child).despawn();
-        }
-    }
-
-    let palette = theme_palette(theme.mode);
-    for path in filtered_structure_entries(&picker) {
-        let label = if path == DEFAULT_STRUCTURE_PATH {
-            format!("DEFAULT · {path}")
-        } else {
-            path.clone()
-        };
-        commands.entity(results_root).with_children(|parent| {
-            parent
-                .spawn((
-                    Button,
-                    Node {
-                        width: Val::Percent(100.0),
-                        padding: UiRect::axes(Val::Px(8.0), Val::Px(4.0)),
-                        border: UiRect::all(Val::Px(1.0)),
-                        ..default()
-                    },
-                    BorderColor(palette.border),
-                    BackgroundColor(palette.button_bg),
-                    StructurePickerResultButton { path: path.clone() },
-                    HudButton,
-                ))
-                .with_children(|button| {
-                    button.spawn((
-                        Text::new(label),
-                        TextFont {
-                            font_size: 11.0,
-                            ..default()
-                        },
-                        TextColor(palette.text),
-                        HudButtonLabel,
-                    ));
-                });
-        });
-    }
-}
-
-#[allow(clippy::type_complexity)]
-pub(crate) fn structure_picker_result_buttons(
-    mut interaction_query: Query<
-        (
-            &Interaction,
-            &StructurePickerResultButton,
-            &mut BackgroundColor,
-        ),
-        (Changed<Interaction>, With<StructurePickerResultButton>),
-    >,
-    mut picker: ResMut<StructurePickerState>,
-    mut file_drag_drop: ResMut<crate::io::FileDragDrop>,
-    catalog_channel: Option<Res<CatalogLoadChannel>>,
-    theme: Res<UiTheme>,
-) {
-    for (interaction, selected, mut background) in &mut interaction_query {
-        match *interaction {
-            Interaction::Pressed => {
-                *background = BackgroundColor(themed_button_bg(theme.mode, Interaction::Pressed));
-                load_structure_from_catalog_path(
-                    &selected.path,
-                    &mut file_drag_drop,
-                    catalog_channel.as_deref(),
-                );
-                picker.visible = false;
-            }
-            Interaction::Hovered => {
-                *background = BackgroundColor(themed_button_bg(theme.mode, Interaction::Hovered));
-            }
-            Interaction::None => {
-                *background = BackgroundColor(themed_button_bg(theme.mode, Interaction::None));
-            }
-        }
-    }
-}
-
 // System to handle button click to load default structure
 #[allow(clippy::type_complexity)]
 pub(crate) fn handle_load_default_button(
@@ -3264,6 +3352,8 @@ pub(crate) fn camera_controls(
     mut touch_gestures: ResMut<TouchGestureState>,
     mut camera_rig: ResMut<CameraRig>,
     ui_interactions: Query<&Interaction, With<Button>>,
+    hover_map: Res<HoverMap>,
+    picker_scroll_nodes: Query<Entity, With<StructurePickerResultsScroll>>,
 ) {
     if let Ok(mut transform) = camera_query.single_mut() {
         let mut zoom_change = 0.0;
@@ -3276,6 +3366,11 @@ pub(crate) fn camera_controls(
         touch_gestures.pan = Vec2::ZERO;
         touch_gestures.zoom = 0.0;
         let ui_active = ui_interactions.iter().any(|i| *i != Interaction::None);
+        let picker_hovered = picker_scroll_nodes.iter().any(|picker_entity| {
+            hover_map
+                .iter()
+                .any(|(_, pointer_map)| pointer_map.contains_key(&picker_entity))
+        });
 
         const MIN_DISTANCE: f32 = 0.2;
         const MAX_DISTANCE: f32 = 200.0;
@@ -3289,7 +3384,7 @@ pub(crate) fn camera_controls(
         if !ui_active && mouse_buttons.pressed(MouseButton::Left) {
             rotate_request += mouse_delta;
         }
-        if !ui_active && touch_rotate != Vec2::ZERO {
+        if !ui_active && !picker_hovered && touch_rotate != Vec2::ZERO {
             rotate_request += touch_rotate;
         }
 
@@ -3331,19 +3426,19 @@ pub(crate) fn camera_controls(
             camera_rig.target = transform.translation + rotated_forward * distance;
         }
 
-        if !ui_active && mouse_buttons.pressed(MouseButton::Right) {
+        if !ui_active && !picker_hovered && mouse_buttons.pressed(MouseButton::Right) {
             pan_request = mouse_delta;
         }
-        if !ui_active && touch_pan != Vec2::ZERO {
+        if !ui_active && !picker_hovered && touch_pan != Vec2::ZERO {
             pan_request += touch_pan;
         }
 
-        if !ui_active {
+        if !ui_active && !picker_hovered {
             for wheel in mouse_wheel_events.read() {
                 zoom_change -= wheel.y * 0.002;
             }
         }
-        if !ui_active && touch_zoom != 0.0 {
+        if !ui_active && !picker_hovered && touch_zoom != 0.0 {
             zoom_change += touch_zoom * TOUCH_ZOOM_SCALE;
         }
 
@@ -3426,7 +3521,7 @@ pub fn toggle_light_attachment(
         (Changed<Interaction>, With<LightAttachmentButton>),
     >,
     q_trans: Query<&GlobalTransform>,
-    mut texts: Query<&mut Text>,
+    mut texts: Query<&mut Text, With<LightAttachmentLabel>>,
     theme: Res<UiTheme>,
 ) {
     for (interaction, mut background, mut button_state, children) in &mut interactions {
diff --git a/vizmat-core/src/ui/picker.rs b/vizmat-core/src/ui/picker.rs
new file mode 100644
index 0000000..fa0039a
--- /dev/null
+++ b/vizmat-core/src/ui/picker.rs
@@ -0,0 +1,978 @@
+use bevy::input::keyboard::{Key, KeyboardInput};
+use bevy::input::mouse::{MouseScrollUnit, MouseWheel};
+use bevy::input::ButtonState;
+use bevy::picking::hover::HoverMap;
+use bevy::prelude::*;
+#[cfg(target_arch = "wasm32")]
+use gloo::utils::window;
+#[cfg(target_arch = "wasm32")]
+use web_sys::Event;
+
+use super::{
+    themed_button_bg, CatalogLoadChannel, HudButton, HudButtonLabel, ThemeMode, TouchGestureState,
+    UiTheme, DEFAULT_STRUCTURE_PATH,
+};
+
+#[derive(Component)]
+pub(crate) struct StructurePickerToggleButton;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerPanel;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerQueryText;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerQueryIcon;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerQueryBar;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerQueryCaret;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerResultsRoot;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerResultsScroll;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerResultsLayout;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerScrollbarTrack;
+
+#[derive(Component)]
+pub(crate) struct StructurePickerScrollbarThumb;
+
+#[derive(Component, Clone)]
+pub(crate) struct StructurePickerResultButton {
+    pub(crate) path: String,
+}
+
+#[derive(Resource, Default)]
+pub(crate) struct StructurePickerState {
+    pub(crate) entries: Vec<String>,
+    pub(crate) query: String,
+    pub(crate) visible: bool,
+}
+
+#[derive(Resource, Default)]
+pub(crate) struct StructurePickerSelectionState {
+    pending: Option<(Entity, String)>,
+    suppress_click_frames: u8,
+}
+
+impl StructurePickerSelectionState {
+    fn consume_suppression(&mut self) -> bool {
+        if self.suppress_click_frames > 0 {
+            self.suppress_click_frames = self.suppress_click_frames.saturating_sub(1);
+            true
+        } else {
+            false
+        }
+    }
+
+    fn suppress_for_touch_drag(&mut self) {
+        self.suppress_click_frames = self.suppress_click_frames.max(2);
+    }
+
+    fn is_suppressed(&self) -> bool {
+        self.suppress_click_frames > 0
+    }
+}
+
+#[derive(Resource)]
+pub(crate) struct StructurePickerCaretState {
+    timer: Timer,
+    pub(crate) visible: bool,
+}
+
+impl Default for StructurePickerCaretState {
+    fn default() -> Self {
+        Self {
+            timer: Timer::from_seconds(0.55, TimerMode::Repeating),
+            visible: true,
+        }
+    }
+}
+
+const SCROLLBAR_WIDTH: f32 = 8.0;
+const SCROLLBAR_TRACK_GAP: f32 = 4.0;
+const MIN_SCROLLBAR_THUMB_PX: f32 = 18.0;
+
+fn picker_scrollbar_colors(mode: ThemeMode) -> (Color, Color) {
+    match mode {
+        ThemeMode::Dark => (
+            Color::srgba(0.26, 0.30, 0.36, 0.52),
+            Color::srgba(0.60, 0.66, 0.74, 0.88),
+        ),
+        ThemeMode::Light => (
+            Color::srgba(0.72, 0.76, 0.82, 0.52),
+            Color::srgba(0.34, 0.39, 0.50, 0.88),
+        ),
+    }
+}
+
+pub(crate) fn set_structure_picker_keyboard_active(visible: bool) {
+    #[cfg(not(target_arch = "wasm32"))]
+    {
+        let _ = visible;
+    }
+
+    #[cfg(target_arch = "wasm32")]
+    let window = window();
+
+    #[cfg(target_arch = "wasm32")]
+    let event_name = if visible {
+        "vizmat-structure-picker-open"
+    } else {
+        "vizmat-structure-picker-close"
+    };
+
+    #[cfg(target_arch = "wasm32")]
+    match Event::new(event_name) {
+        Ok(event) => {
+            let _ = window.dispatch_event(&event);
+        }
+        Err(err) => {
+            warn!("Failed to notify picker keyboard visibility for '{event_name}': {err:?}");
+        }
+    }
+}
+
+pub(crate) fn setup_structure_picker_panel(
+    commands: &mut Commands,
+    theme: &UiTheme,
+    icon_font: &Handle<Font>,
+) {
+    let palette = super::theme_palette(theme.mode);
+    let (scrollbar_track_bg, scrollbar_thumb_bg) = picker_scrollbar_colors(theme.mode);
+    commands
+        .spawn((
+            Node {
+                position_type: PositionType::Absolute,
+                top: Val::Px(54.0),
+                left: Val::Px(10.0),
+                width: Val::Px(360.0),
+                max_height: Val::Px(320.0),
+                display: Display::None,
+                flex_direction: FlexDirection::Column,
+                row_gap: Val::Px(6.0),
+                padding: UiRect::all(Val::Px(8.0)),
+                border: UiRect::all(Val::Px(1.0)),
+                ..default()
+            },
+            BorderColor(palette.border),
+            BackgroundColor(palette.bar_bg_alt),
+            StructurePickerPanel,
+        ))
+        .with_children(|panel| {
+            panel
+                .spawn((
+                    Node {
+                        width: Val::Percent(100.0),
+                        height: Val::Px(28.0),
+                        flex_direction: FlexDirection::Row,
+                        align_items: AlignItems::Center,
+                        justify_content: JustifyContent::SpaceBetween,
+                        border: UiRect::all(Val::Px(1.0)),
+                        padding: UiRect::axes(Val::Px(8.0), Val::Px(4.0)),
+                        column_gap: Val::Px(4.0),
+                        ..default()
+                    },
+                    BorderColor(palette.border),
+                    BackgroundColor(palette.bar_bg),
+                    StructurePickerQueryBar,
+                ))
+                .with_children(|row| {
+                    row.spawn((Node {
+                        flex_grow: 1.0,
+                        min_width: Val::Px(0.0),
+                        display: Display::Flex,
+                        flex_direction: FlexDirection::Row,
+                        align_items: AlignItems::Center,
+                        column_gap: Val::Px(0.0),
+                        ..default()
+                    },))
+                        .with_children(|query_group| {
+                            query_group.spawn((
+                                Text::new("Search structures..."),
+                                TextFont {
+                                    font_size: 11.0,
+                                    ..default()
+                                },
+                                TextColor(palette.text_muted),
+                                StructurePickerQueryText,
+                            ));
+                            query_group.spawn((
+                                Text::new("|"),
+                                TextFont {
+                                    font_size: 11.0,
+                                    ..default()
+                                },
+                                TextColor(palette.text_muted),
+                                Visibility::Hidden,
+                                StructurePickerQueryCaret,
+                            ));
+                        });
+                    row.spawn((
+                        Text::new("\u{f002}"),
+                        TextFont {
+                            font: icon_font.clone(),
+                            font_size: 11.0,
+                            ..default()
+                        },
+                        TextColor(palette.text_muted),
+                        StructurePickerQueryIcon,
+                    ));
+                });
+            panel
+                .spawn((
+                    Node {
+                        width: Val::Percent(100.0),
+                        min_height: Val::Px(120.0),
+                        max_height: Val::Px(240.0),
+                        height: Val::Px(180.0),
+                        align_self: AlignSelf::Stretch,
+                        min_width: Val::Px(260.0),
+                        flex_direction: FlexDirection::Row,
+                        align_items: AlignItems::Stretch,
+                        ..default()
+                    },
+                    StructurePickerResultsLayout,
+                ))
+                .with_children(|results| {
+                    results.spawn((
+                        Node {
+                            flex_direction: FlexDirection::Column,
+                            row_gap: Val::Px(4.0),
+                            width: Val::Percent(100.0),
+                            height: Val::Percent(100.0),
+                            flex_grow: 1.0,
+                            overflow: Overflow {
+                                x: OverflowAxis::Clip,
+                                y: OverflowAxis::Scroll,
+                            },
+                            padding: UiRect::axes(Val::Px(2.0), Val::Px(2.0)),
+                            ..default()
+                        },
+                        ScrollPosition::default(),
+                        StructurePickerResultsRoot,
+                        StructurePickerResultsScroll,
+                    ));
+
+                    results
+                        .spawn((
+                            Node {
+                                width: Val::Px(SCROLLBAR_WIDTH),
+                                margin: UiRect::left(Val::Px(SCROLLBAR_TRACK_GAP)),
+                                position_type: PositionType::Relative,
+                                align_self: AlignSelf::Stretch,
+                                ..default()
+                            },
+                            BackgroundColor(scrollbar_track_bg),
+                            StructurePickerScrollbarTrack,
+                        ))
+                        .with_children(|track| {
+                            track.spawn((
+                                Node {
+                                    position_type: PositionType::Absolute,
+                                    left: Val::Px(0.0),
+                                    right: Val::Px(0.0),
+                                    top: Val::Px(0.0),
+                                    height: Val::Px(MIN_SCROLLBAR_THUMB_PX),
+                                    ..default()
+                                },
+                                Visibility::Hidden,
+                                BorderRadius::MAX,
+                                BackgroundColor(scrollbar_thumb_bg),
+                                StructurePickerScrollbarThumb,
+                            ));
+                        });
+                });
+        });
+}
+
+pub(crate) fn filtered_structure_entries(state: &StructurePickerState) -> Vec<String> {
+    state
+        .entries
+        .iter()
+        .filter(|entry| structure_matches_query(entry, &state.query))
+        .cloned()
+        .collect()
+}
+
+pub(crate) fn apply_structure_picker_query_text(
+    picker: &mut StructurePickerState,
+    caret_state: &mut StructurePickerCaretState,
+    query: String,
+) {
+    picker.query = query;
+    caret_state.visible = true;
+    caret_state.timer.reset();
+}
+
+#[allow(clippy::type_complexity)]
+pub(crate) fn structure_picker_toggle_button(
+    mut interaction_query: Query<
+        (&Interaction, &mut BackgroundColor),
+        (Changed<Interaction>, With<StructurePickerToggleButton>),
+    >,
+    mut picker: ResMut<StructurePickerState>,
+    theme: Res<UiTheme>,
+    mut caret_state: ResMut<StructurePickerCaretState>,
+) {
+    for (interaction, mut color) in &mut interaction_query {
+        match *interaction {
+            Interaction::Pressed => {
+                picker.visible = !picker.visible;
+                if picker.visible {
+                    apply_structure_picker_query_text(&mut picker, &mut caret_state, String::new());
+                    set_structure_picker_keyboard_active(true);
+                } else {
+                    set_structure_picker_keyboard_active(false);
+                }
+                *color = BackgroundColor(themed_button_bg(theme.mode, Interaction::Pressed));
+            }
+            Interaction::Hovered => {
+                *color = BackgroundColor(themed_button_bg(theme.mode, Interaction::Hovered));
+            }
+            Interaction::None => {
+                *color = BackgroundColor(themed_button_bg(theme.mode, Interaction::None));
+            }
+        }
+    }
+}
+
+pub(crate) fn structure_picker_keyboard_search(
+    mut keyboard_events: EventReader<KeyboardInput>,
+    mut picker: ResMut<StructurePickerState>,
+    mut file_drag_drop: ResMut<crate::io::FileDragDrop>,
+    catalog_channel: Option<Res<CatalogLoadChannel>>,
+    mut caret_state: ResMut<StructurePickerCaretState>,
+) {
+    if !picker.visible {
+        return;
+    }
+
+    for event in keyboard_events.read() {
+        if event.state != ButtonState::Pressed {
+            continue;
+        }
+
+        match &event.logical_key {
+            Key::Escape => {
+                picker.visible = false;
+                set_structure_picker_keyboard_active(false);
+            }
+            Key::Backspace => {
+                let _ = picker.query.pop();
+                let query = picker.query.clone();
+                apply_structure_picker_query_text(&mut picker, &mut caret_state, query);
+            }
+            Key::Enter => {
+                if let Some(first) = filtered_structure_entries(&picker).first().cloned() {
+                    super::load_structure_from_catalog_path(
+                        &first,
+                        &mut file_drag_drop,
+                        catalog_channel.as_deref(),
+                    );
+                    picker.visible = false;
+                    set_structure_picker_keyboard_active(false);
+                }
+            }
+            Key::Character(_) => {
+                if let Some(text) = &event.text {
+                    // Keep search input simple and predictable for all layouts.
+                    if text.chars().all(|ch| !ch.is_control()) {
+                        let mut query = picker.query.clone();
+                        query.push_str(text);
+                        apply_structure_picker_query_text(&mut picker, &mut caret_state, query);
+                    }
+                }
+            }
+            _ => {}
+        }
+    }
+}
+
+#[allow(clippy::type_complexity, clippy::too_many_arguments)]
+pub(crate) fn refresh_structure_picker_panel(
+    mut commands: Commands,
+    picker: Res<StructurePickerState>,
+    mut panel_query: Query<&mut Node, With<StructurePickerPanel>>,
+    mut panel_style_query: Query<
+        (&mut BackgroundColor, &mut BorderColor),
+        (With<StructurePickerPanel>, Without<StructurePickerQueryBar>),
+    >,
+    mut query_bar_style: Query<
+        (&mut BackgroundColor, &mut BorderColor),
+        (With<StructurePickerQueryBar>, Without<StructurePickerPanel>),
+    >,
+    mut query_text: Query<
+        (&mut Text, &mut TextColor),
+        (
+            With<StructurePickerQueryText>,
+            Without<StructurePickerQueryIcon>,
+            Without<StructurePickerQueryCaret>,
+        ),
+    >,
+    mut query_caret_color: Query<
+        &mut TextColor,
+        (
+            With<StructurePickerQueryCaret>,
+            Without<StructurePickerQueryText>,
+            Without<StructurePickerQueryIcon>,
+        ),
+    >,
+    mut query_icon_color: Query<
+        &mut TextColor,
+        (
+            With<StructurePickerQueryIcon>,
+            Without<StructurePickerQueryText>,
+            Without<StructurePickerQueryCaret>,
+        ),
+    >,
+    results_root_query: Query<
+        Entity,
+        (
+            With<StructurePickerResultsRoot>,
+            With<StructurePickerResultsScroll>,
+        ),
+    >,
+    result_buttons: Query<Entity, With<StructurePickerResultButton>>,
+    theme: Res<UiTheme>,
+) {
+    let Ok(mut panel_node) = panel_query.single_mut() else {
+        return;
+    };
+    panel_node.display = if picker.visible {
+        Display::Flex
+    } else {
+        Display::None
+    };
+
+    if !picker.visible {
+        return;
+    }
+
+    let palette = super::theme_palette(theme.mode);
+
+    for (mut panel_bg, mut panel_border) in &mut panel_style_query {
+        panel_bg.0 = palette.bar_bg_alt;
+        panel_border.0 = palette.border;
+    }
+    for (mut query_bar_bg, mut query_bar_border) in &mut query_bar_style {
+        query_bar_bg.0 = palette.bar_bg;
+        query_bar_border.0 = palette.border;
+    }
+    if let Ok((mut text, mut text_color)) = query_text.single_mut() {
+        if picker.query.is_empty() {
+            text.0 = "Search structures...".to_string();
+            text_color.0 = palette.text_muted;
+        } else {
+            text.0 = picker.query.clone();
+            text_color.0 = palette.text;
+        }
+    }
+    if let Ok(mut caret_color) = query_caret_color.single_mut() {
+        caret_color.0 = if picker.query.is_empty() {
+            palette.text_muted
+        } else {
+            palette.text
+        };
+    }
+    if let Ok(mut icon_color) = query_icon_color.single_mut() {
+        icon_color.0 = palette.text_muted;
+    }
+
+    if !picker.is_changed() && !theme.is_changed() {
+        return;
+    }
+
+    for child in result_buttons.iter() {
+        commands.entity(child).despawn();
+    }
+
+    let Ok(results_root) = results_root_query.single() else {
+        return;
+    };
+
+    for path in filtered_structure_entries(&picker) {
+        let label = if path == DEFAULT_STRUCTURE_PATH {
+            format!("DEFAULT · {path}")
+        } else {
+            path.clone()
+        };
+        commands.entity(results_root).with_children(|parent| {
+            parent
+                .spawn((
+                    Button,
+                    Node {
+                        width: Val::Percent(100.0),
+                        padding: UiRect::axes(Val::Px(8.0), Val::Px(4.0)),
+                        border: UiRect::all(Val::Px(1.0)),
+                        ..default()
+                    },
+                    BorderColor(palette.border),
+                    BackgroundColor(palette.button_bg),
+                    StructurePickerResultButton { path: path.clone() },
+                    HudButton,
+                ))
+                .with_children(|button| {
+                    button.spawn((
+                        Text::new(label),
+                        TextFont {
+                            font_size: 11.0,
+                            ..default()
+                        },
+                        TextColor(palette.text),
+                        HudButtonLabel,
+                    ));
+                });
+        });
+    }
+}
+
+pub(crate) fn blink_structure_picker_query_caret(
+    time: Res<Time>,
+    picker: Res<StructurePickerState>,
+    mut caret_state: ResMut<StructurePickerCaretState>,
+    mut caret_query: Query<&mut Visibility, With<StructurePickerQueryCaret>>,
+) {
+    let Ok(mut caret_visibility) = caret_query.single_mut() else {
+        return;
+    };
+
+    if !picker.visible {
+        *caret_visibility = Visibility::Hidden;
+        return;
+    }
+
+    caret_state.timer.tick(time.delta());
+    if caret_state.timer.just_finished() {
+        caret_state.visible = !caret_state.visible;
+    }
+    *caret_visibility = if caret_state.visible {
+        Visibility::Inherited
+    } else {
+        Visibility::Hidden
+    };
+}
+
+#[allow(clippy::type_complexity)]
+pub(crate) fn update_structure_picker_scroll_indicator(
+    layout_query: Query<&Children, With<StructurePickerResultsLayout>>,
+    mut thumb_query: Query<
+        (&mut Node, &mut Visibility, &mut BackgroundColor),
+        (
+            With<StructurePickerScrollbarThumb>,
+            Without<StructurePickerScrollbarTrack>,
+        ),
+    >,
+    scroll_query: Query<(&ScrollPosition, &ComputedNode), With<StructurePickerResultsRoot>>,
+    mut track_query: Query<
+        (&Children, &ComputedNode, &mut BackgroundColor),
+        (
+            With<StructurePickerScrollbarTrack>,
+            Without<StructurePickerScrollbarThumb>,
+        ),
+    >,
+    theme: Res<UiTheme>,
+) {
+    let (track_color, thumb_color) = picker_scrollbar_colors(theme.mode);
+    for mut thumb_bg in thumb_query.iter_mut().map(|(_, _, bg)| bg) {
+        thumb_bg.0 = thumb_color;
+    }
+    for (_, _, mut track_bg) in &mut track_query {
+        track_bg.0 = track_color;
+    }
+
+    let Ok(layout_children) = layout_query.single() else {
+        return;
+    };
+
+    let mut results_root: Option<Entity> = None;
+    let mut track_root: Option<Entity> = None;
+    for child in layout_children.iter() {
+        if scroll_query.contains(child) {
+            results_root = Some(child);
+            continue;
+        }
+        if track_query.contains(child) {
+            track_root = Some(child);
+        }
+    }
+
+    let (Some(results_root), Some(track_root)) = (results_root, track_root) else {
+        return;
+    };
+
+    let (scroll_position, scroll_computed) = match scroll_query.get(results_root) {
+        Ok(value) => value,
+        Err(_) => return,
+    };
+    let (track_children, track_computed, _) = match track_query.get(track_root) {
+        Ok(value) => value,
+        Err(_) => return,
+    };
+
+    let mut thumb_entity = None;
+    for entity in track_children.iter() {
+        if thumb_query.get(entity).is_ok() {
+            thumb_entity = Some(entity);
+            break;
+        }
+    }
+    let Some(thumb_entity) = thumb_entity else {
+        return;
+    };
+
+    let Ok((mut thumb_node, mut visibility, _)) = thumb_query.get_mut(thumb_entity) else {
+        return;
+    };
+
+    let viewport_height = scroll_computed.size.y * scroll_computed.inverse_scale_factor;
+    let content_height = scroll_computed.content_size.y * scroll_computed.inverse_scale_factor;
+    let track_height = track_computed.size.y * track_computed.inverse_scale_factor;
+    let max_scroll = (content_height - viewport_height).max(0.0);
+
+    if max_scroll <= 0.0 || track_height <= 0.0 {
+        *visibility = Visibility::Hidden;
+        return;
+    }
+
+    let viewport_ratio = (viewport_height / content_height).clamp(0.05, 1.0);
+    let mut thumb_height =
+        (track_height * viewport_ratio).clamp(MIN_SCROLLBAR_THUMB_PX, track_height);
+
+    if thumb_height > track_height {
+        thumb_height = track_height;
+    }
+
+    let scroll_offset = scroll_position.offset_y.clamp(0.0, max_scroll);
+    let track_range = (track_height - thumb_height).max(0.0);
+    let thumb_top = if track_range > 0.0 {
+        (scroll_offset / max_scroll) * track_range
+    } else {
+        0.0
+    };
+
+    thumb_node.top = Val::Px(thumb_top);
+    thumb_node.height = Val::Px(thumb_height);
+    *visibility = Visibility::Inherited;
+}
+
+#[allow(clippy::too_many_arguments)]
+pub(crate) fn structure_picker_scroll(
+    mut mouse_wheel_events: EventReader<MouseWheel>,
+    hover_map: Res<HoverMap>,
+    scroll_nodes: Query<Entity, With<StructurePickerResultsScroll>>,
+    panel_nodes: Query<Entity, With<StructurePickerPanel>>,
+    mut scroll_positions: Query<&mut ScrollPosition>,
+    parents: Query<&ChildOf>,
+    touch_gesture_state: Res<TouchGestureState>,
+    keyboard_input: Res<ButtonInput<KeyCode>>,
+    mut picker_selection_state: ResMut<StructurePickerSelectionState>,
+) {
+    let _ = picker_selection_state.consume_suppression();
+
+    let picker_hovered = panel_nodes
+        .iter()
+        .chain(scroll_nodes.iter())
+        .any(|picker_root| {
+            hover_map.iter().any(|(_, pointer_map)| {
+                pointer_map
+                    .iter()
+                    .any(|(hovered, _)| is_descendant_or_self(*hovered, picker_root, &parents))
+            })
+        });
+
+    for mouse_wheel in mouse_wheel_events.read() {
+        let (mut dx, mut dy) = match mouse_wheel.unit {
+            MouseScrollUnit::Line => (mouse_wheel.x * 12.0, mouse_wheel.y * 12.0),
+            MouseScrollUnit::Pixel => (mouse_wheel.x, mouse_wheel.y),
+        };
+        if keyboard_input.pressed(KeyCode::ControlLeft)
+            || keyboard_input.pressed(KeyCode::ControlRight)
+        {
+            std::mem::swap(&mut dx, &mut dy);
+        }
+
+        let mut did_scroll = false;
+        for (_pointer, pointer_map) in hover_map.iter() {
+            for (entity, _hit) in pointer_map.iter() {
+                let hovered = *entity;
+                for scroll_root in scroll_nodes.iter() {
+                    if is_descendant_or_self(hovered, scroll_root, &parents) {
+                        if let Ok(mut scroll_position) = scroll_positions.get_mut(scroll_root) {
+                            scroll_position.offset_x -= dx;
+                            scroll_position.offset_y -= dy;
+                            did_scroll = true;
+                            break;
+                        }
+                    }
+                }
+                if did_scroll {
+                    break;
+                }
+            }
+            if did_scroll {
+                break;
+            }
+        }
+    }
+
+    let rotate_drag = touch_gesture_state.rotate.length_squared() > 0.0004;
+    if picker_hovered && rotate_drag {
+        picker_selection_state.suppress_for_touch_drag();
+        picker_selection_state.pending = None;
+        for scroll_root in scroll_nodes.iter() {
+            if let Ok(mut scroll_position) = scroll_positions.get_mut(scroll_root) {
+                scroll_position.offset_x -= touch_gesture_state.rotate.x;
+                scroll_position.offset_y -= touch_gesture_state.rotate.y;
+                break;
+            }
+        }
+    }
+}
+
+fn is_descendant_or_self(mut entity: Entity, ancestor: Entity, parents: &Query<&ChildOf>) -> bool {
+    loop {
+        if entity == ancestor {
+            return true;
+        }
+        match parents.get(entity) {
+            Ok(parent) => entity = parent.parent(),
+            Err(_) => return false,
+        }
+    }
+}
+
+#[allow(clippy::type_complexity)]
+pub(crate) fn structure_picker_result_buttons(
+    mut interaction_query: Query<
+        (
+            Entity,
+            &Interaction,
+            &StructurePickerResultButton,
+            &mut BackgroundColor,
+        ),
+        (Changed<Interaction>, With<StructurePickerResultButton>),
+    >,
+    mut picker: ResMut<StructurePickerState>,
+    mut file_drag_drop: ResMut<crate::io::FileDragDrop>,
+    catalog_channel: Option<Res<CatalogLoadChannel>>,
+    theme: Res<UiTheme>,
+    mut picker_selection_state: ResMut<StructurePickerSelectionState>,
+) {
+    let mut selected_path = None;
+
+    for (entity, interaction, selected, mut background) in &mut interaction_query {
+        match *interaction {
+            Interaction::Pressed => {
+                *background = BackgroundColor(themed_button_bg(theme.mode, Interaction::Pressed));
+                if !picker_selection_state.is_suppressed() {
+                    picker_selection_state.pending = Some((entity, selected.path.clone()));
+                }
+            }
+            Interaction::Hovered => {
+                *background = BackgroundColor(themed_button_bg(theme.mode, Interaction::Hovered));
+
+                if let Some((pending_entity, pending_path)) = picker_selection_state.pending.take()
+                {
+                    if pending_entity == entity {
+                        if !picker_selection_state.is_suppressed() {
+                            selected_path = Some(pending_path);
+                        }
+                    } else {
+                        picker_selection_state.pending = Some((pending_entity, pending_path));
+                    }
+                }
+            }
+            Interaction::None => {
+                *background = BackgroundColor(themed_button_bg(theme.mode, Interaction::None));
+
+                if let Some((pending_entity, _)) = picker_selection_state.pending.as_ref() {
+                    if *pending_entity == entity {
+                        picker_selection_state.pending = None;
+                    }
+                }
+            }
+        }
+    }
+
+    if let Some(path) = selected_path {
+        super::load_structure_from_catalog_path(
+            &path,
+            &mut file_drag_drop,
+            catalog_channel.as_deref(),
+        );
+        picker.visible = false;
+        set_structure_picker_keyboard_active(false);
+    }
+}
+
+fn structure_matches_query(path: &str, query: &str) -> bool {
+    if query.trim().is_empty() {
+        return true;
+    }
+    path.to_ascii_lowercase()
+        .contains(&query.trim().to_ascii_lowercase())
+}
+
+pub(crate) fn parse_embedded_structure_entries() -> Vec<String> {
+    super::EMBEDDED_STRUCTURE_LIST
+        .lines()
+        .map(str::trim)
+        .filter(|line| !line.is_empty() && !line.starts_with('#'))
+        .map(ToOwned::to_owned)
+        .collect()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn structure_matches_query_returns_true_for_empty_query() {
+        assert!(structure_matches_query("proteins/6VXX.pdb", ""));
+        assert!(structure_matches_query("proteins/6VXX.pdb", "   "));
+    }
+
+    #[test]
+    fn structure_matches_query_is_case_insensitive() {
+        assert!(structure_matches_query("proteins/6VXX.pdb", "6vxx"));
+        assert!(structure_matches_query("proteins/water.xyz", "WATER"));
+        assert!(structure_matches_query("proteins/abc", "PrO"));
+        assert!(!structure_matches_query("proteins/abc", "xyz"));
+    }
+
+    #[test]
+    fn filtered_structure_entries_filters_by_query() {
+        let state = StructurePickerState {
+            entries: vec![
+                "proteins/6VXX.pdb".to_string(),
+                "compounds/water.xyz".to_string(),
+                "proteins/4v6f.pdb".to_string(),
+            ],
+            query: "V6F".to_string(),
+            visible: true,
+        };
+
+        let filtered = filtered_structure_entries(&state);
+
+        assert_eq!(filtered, vec!["proteins/4v6f.pdb".to_string()]);
+    }
+
+    #[test]
+    fn setup_structure_picker_panel_spawns_one_query_text_and_icon() {
+        let mut app = App::new();
+        let icon_font = Handle::<Font>::default();
+
+        setup_structure_picker_panel(
+            &mut app.world_mut().commands(),
+            &UiTheme::default(),
+            &icon_font,
+        );
+        app.update();
+
+        let query_text_count = app
+            .world()
+            .iter_entities()
+            .filter(|entity| entity.contains::<StructurePickerQueryText>())
+            .count();
+        let query_icon_count = app
+            .world()
+            .iter_entities()
+            .filter(|entity| entity.contains::<StructurePickerQueryIcon>())
+            .count();
+        let query_caret_count = app
+            .world()
+            .iter_entities()
+            .filter(|entity| entity.contains::<StructurePickerQueryCaret>())
+            .count();
+
+        assert_eq!(query_text_count, 1);
+        assert_eq!(query_icon_count, 1);
+        assert_eq!(query_caret_count, 1);
+    }
+
+    #[test]
+    fn refresh_structure_picker_panel_shows_placeholder_when_empty_query() {
+        let mut app = App::new();
+        app.insert_resource(StructurePickerState {
+            entries: vec!["proteins/6VXX.pdb".to_string()],
+            query: String::new(),
+            visible: true,
+        });
+        app.insert_resource(UiTheme::default());
+        let icon_font = Handle::<Font>::default();
+
+        setup_structure_picker_panel(
+            &mut app.world_mut().commands(),
+            &UiTheme::default(),
+            &icon_font,
+        );
+        app.add_systems(Update, refresh_structure_picker_panel);
+        app.update();
+
+        let palette = super::super::theme_palette(UiTheme::default().mode);
+        let query_text = app.world().iter_entities().find_map(|entity| {
+            if entity.contains::<StructurePickerQueryText>() {
+                entity.get::<Text>().zip(entity.get::<TextColor>())
+            } else {
+                None
+            }
+        });
+        let panel_node = app.world().iter_entities().find_map(|entity| {
+            if entity.contains::<StructurePickerPanel>() {
+                entity.get::<Node>()
+            } else {
+                None
+            }
+        });
+
+        let (query_text, query_color) = query_text.expect("query text should exist");
+        let panel_node = panel_node.expect("picker panel should exist");
+
+        assert_eq!(query_text.0, "Search structures...");
+        assert_eq!(query_color.0, palette.text_muted);
+        assert_eq!(panel_node.display, Display::Flex);
+    }
+
+    #[test]
+    fn refresh_structure_picker_panel_shows_query_and_text_color() {
+        let mut app = App::new();
+        app.insert_resource(StructurePickerState {
+            entries: vec!["proteins/6VXX.pdb".to_string()],
+            query: "6VXX".to_string(),
+            visible: true,
+        });
+        app.insert_resource(UiTheme::default());
+        let icon_font = Handle::<Font>::default();
+
+        setup_structure_picker_panel(
+            &mut app.world_mut().commands(),
+            &UiTheme::default(),
+            &icon_font,
+        );
+        app.add_systems(Update, refresh_structure_picker_panel);
+        app.update();
+
+        let palette = super::super::theme_palette(UiTheme::default().mode);
+        let query_text = app.world().iter_entities().find_map(|entity| {
+            if entity.contains::<StructurePickerQueryText>() {
+                entity.get::<Text>().zip(entity.get::<TextColor>())
+            } else {
+                None
+            }
+        });
+        let (query_text, query_color) = query_text.expect("query text should exist");
+
+        assert_eq!(query_text.0, "6VXX");
+        assert_eq!(query_color.0, palette.text);
+    }
+}