pih-appointment-widget 0.0.37 → 0.0.39

package/src/components/ICD10Assistant.jsx

@@ -1,855 +1,923 @@
-/**
- * ICD10Assistant.jsx
- * AI-powered ICD-10 coding assistant panel.
- * Floats as a pill button; expands into a full panel on click.
- */
-import React, { useState, useRef, useEffect, useCallback } from "react";
-import { getICDSuggestions, ICD_MODE } from "../services/icdService";
-import { useClipboard } from "../hooks/useClipboard";
-
-// ─── Constants ───────────────────────────────────────────────────────────────
-const MAX_HISTORY = 3;
-const FONT = '"Nunito", sans-serif';
-
-// ─── Colour tokens ────────────────────────────────────────────────────────────
-const C = {
-  primary: "#4C4DDC",
-  primaryDark: "#3A3BBD",
-  primaryLight: "#E8EEF4",
-  teal: "#1CC3CE",
-  tealLight: "#E0F8F9",
-  success: "#16a34a",
-  successLight: "#dcfce7",
-  error: "#dc2626",
-  errorLight: "#fee2e2",
-  warn: "#d97706",
-  warnLight: "#fef3c7",
-  text: "#1a1a1a",
-  muted: "#666",
-  border: "#E5E5E5",
-  bg: "#F5F5F7",
-  white: "#FFFFFF",
-};
-
-// ─── Tiny helpers ─────────────────────────────────────────────────────────────
-function Badge({ children, color = C.primary, bg = C.primaryLight }) {
-  return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        padding: "2px 10px",
-        borderRadius: "999px",
-        fontSize: "12px",
-        fontWeight: 700,
-        color,
-        background: bg,
-        letterSpacing: "0.5px",
-      }}
-    >
-      {children}
-    </span>
-  );
-}
-
-function Spinner() {
-  return (
-    <>
-      <style>{`@keyframes icd-spin{to{transform:rotate(360deg)}}`}</style>
-      <div
-        style={{
-          width: 20,
-          height: 20,
-          border: "2.5px solid #d1d5db",
-          borderTop: `2.5px solid ${C.primary}`,
-          borderRadius: "50%",
-          animation: "icd-spin 0.8s linear infinite",
-          flexShrink: 0,
-        }}
-      />
-    </>
-  );
-}
-
-function CopyButton({ text, label = "Copy", copyKey, copiedKey, copy }) {
-  const copied = copiedKey === copyKey;
-  return (
-    <button
-      onClick={() => copy(text, copyKey)}
-      title={copied ? "Copied!" : `Copy ${label}`}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        padding: "3px 10px",
-        fontSize: 11,
-        fontWeight: 600,
-        fontFamily: FONT,
-        border: `1px solid ${copied ? C.success : C.border}`,
-        borderRadius: 5,
-        background: copied ? C.successLight : C.white,
-        color: copied ? C.success : C.muted,
-        cursor: "pointer",
-        transition: "all 0.15s ease",
-        whiteSpace: "nowrap",
-      }}
-    >
-      {copied ? "✓ Copied" : `⎘ ${label}`}
-    </button>
-  );
-}
-
-// ─── Result Card ──────────────────────────────────────────────────────────────
-function ResultCard({ match, index, copy, copiedKey }) {
-  const cardCopyKey = `card-${index}`;
-  const fullText = `${match.code} — ${match.description}${match.reason ? `\nNote: ${match.reason}` : ""}`;
-
-  return (
-    <div
-      style={{
-        border: `1px solid ${C.border}`,
-        borderRadius: 10,
-        padding: "14px 16px",
-        background: C.white,
-        display: "flex",
-        flexDirection: "column",
-        gap: 6,
-        boxShadow: "0 1px 4px rgba(0,0,0,0.06)",
-      }}
-    >
-      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
-        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
-          <Badge color={C.primary} bg={C.primaryLight}>
-            {match.code}
-          </Badge>
-          <span style={{ fontSize: 13, fontWeight: 600, color: C.text, lineHeight: 1.4 }}>
-            {match.description}
-          </span>
-        </div>
-        <CopyButton
-          text={fullText}
-          label={match.code}
-          copyKey={cardCopyKey}
-          copiedKey={copiedKey}
-          copy={copy}
-        />
-      </div>
-      {match.reason && (
-        <p style={{ margin: 0, fontSize: 12, color: C.muted, lineHeight: 1.5, paddingLeft: 2 }}>
-          💡 {match.reason}
-        </p>
-      )}
-    </div>
-  );
-}
-
-// ─── History Chip ─────────────────────────────────────────────────────────────
-function HistoryChip({ item, onClick }) {
-  return (
-    <button
-      onClick={() => onClick(item.query)}
-      title={`Re-run: ${item.query}`}
-      style={{
-        padding: "4px 10px",
-        border: `1px solid ${C.border}`,
-        borderRadius: 999,
-        fontSize: 11,
-        fontFamily: FONT,
-        color: C.muted,
-        background: C.white,
-        cursor: "pointer",
-        maxWidth: 180,
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        transition: "border-color 0.15s",
-      }}
-      onMouseEnter={(e) => (e.currentTarget.style.borderColor = C.primary)}
-      onMouseLeave={(e) => (e.currentTarget.style.borderColor = C.border)}
-    >
-      🕐 {item.query}
-    </button>
-  );
-}
-
-// ─── Mode Toggle (tab bar) ──────────────────────────────────────────────────
-function ModeToggle({ mode, onChange }) {
-  const tab = (id, label, icon) => (
-    <button
-      onClick={() => onChange(id)}
-      style={{
-        flex: 1,
-        padding: "6px 0",
-        border: "none",
-        borderRadius: 6,
-        fontSize: 12,
-        fontWeight: 700,
-        fontFamily: FONT,
-        cursor: "pointer",
-        transition: "all 0.15s",
-        background: mode === id ? C.white : "transparent",
-        color: mode === id ? C.primary : "rgba(255,255,255,0.7)",
-        boxShadow: mode === id ? "0 1px 4px rgba(0,0,0,0.15)" : "none",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 5,
-      }}
-    >
-      <span>{icon}</span> {label}
-    </button>
-  );
-  return (
-    <div
-      style={{
-        display: "flex",
-        background: "rgba(255,255,255,0.15)",
-        borderRadius: 8,
-        padding: 3,
-        gap: 2,
-        marginTop: 10,
-      }}
-    >
-      {tab("nlm", "Quick Lookup", "🔎")}
-      {tab("ai", "AI Suggest", "🤖")}
-    </div>
-  );
-}
-
-// ─── NLM Lookup Panel ────────────────────────────────────────────────────────
-// Uses the free NLM Clinical Tables API — no API key, no credits needed.
-function NLMLookupPanel({ panelRef, onClose, mode, onModeChange }) {
-  const [query, setQuery] = useState("");
-  const [results, setResults] = useState([]);
-  const [status, setStatus] = useState("");
-  const [copied, setCopied] = useState("");
-  const debounceRef = useRef(null);
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    setTimeout(() => inputRef.current?.focus(), 80);
-  }, []);
-
-  const search = useCallback(async (term) => {
-    if (term.length < 2) {
-      setResults([]);
-      setStatus("");
-      return;
-    }
-    setStatus("Searching…");
-    try {
-      const data = await getICDSuggestions(term, ICD_MODE.ICD_ONLY);
-      const codes = (data.matches || []).map((m) => [m.code, m.description]);
-      setResults(codes);
-      setStatus(
-        codes.length === 0
-          ? "No matching codes found."
-          : `Showing ${codes.length} result${codes.length !== 1 ? "s" : ""}`
-      );
-    } catch (err) {
-      setStatus(err.message || "Could not fetch results. Check your connection.");
-      setResults([]);
-    }
-  }, []);
-
-  const handleChange = (e) => {
-    const val = e.target.value;
-    setQuery(val);
-    clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => search(val.trim()), 300);
-  };
-
-  const copyCode = (code) => {
-    navigator.clipboard.writeText(code).then(() => {
-      setCopied(code);
-      setTimeout(() => setCopied(""), 2000);
-    });
-  };
-
-  return (
-    <div
-      ref={panelRef}
-      style={{
-        position: "fixed",
-        bottom: 28,
-        right: 28,
-        zIndex: 99999,
-        width: "min(480px, calc(100vw - 32px))",
-        maxHeight: "calc(100vh - 56px)",
-        display: "flex",
-        flexDirection: "column",
-        background: C.white,
-        borderRadius: 16,
-        boxShadow: "0 12px 48px rgba(0,0,0,0.18)",
-        fontFamily: FONT,
-        overflow: "hidden",
-        animation: "icd-slide-in 0.2s ease",
-      }}
-    >
-      <style>{`@keyframes icd-slide-in{from{opacity:0;transform:translateY(20px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}`}</style>
-
-      {/* Header */}
-      <div style={{ background: `linear-gradient(135deg, ${C.primary} 0%, ${C.teal} 100%)`, padding: "14px 18px", flexShrink: 0 }}>
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-            <span style={{ fontSize: 22 }}>🩺</span>
-            <div>
-              <div style={{ color: C.white, fontWeight: 700, fontSize: 15, lineHeight: 1.2 }}>ICD-10 Coding Assistant</div>
-              <div style={{ color: "rgba(255,255,255,0.75)", fontSize: 11 }}>Quick ICD-10 lookup</div>
-            </div>
-          </div>
-          <button onClick={onClose} style={{ background: "rgba(255,255,255,0.2)", border: "1px solid rgba(255,255,255,0.3)", borderRadius: 8, color: C.white, cursor: "pointer", fontSize: 18, fontWeight: "bold", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center" }}>×</button>
-        </div>
-        <ModeToggle mode={mode} onChange={onModeChange} />
-      </div>
-
-      {/* Body */}
-      <div style={{ flex: 1, overflowY: "auto", padding: "16px 18px", display: "flex", flexDirection: "column", gap: 10 }}>
-        <input
-          ref={inputRef}
-          type="text"
-          value={query}
-          onChange={handleChange}
-          placeholder="Type a diagnosis, e.g. diabetes, hypertension…"
-          style={{
-            width: "100%",
-            padding: "10px 14px",
-            fontSize: 14,
-            fontFamily: FONT,
-            border: `1.5px solid ${C.border}`,
-            borderRadius: 8,
-            outline: "none",
-            boxSizing: "border-box",
-            transition: "border-color 0.15s",
-          }}
-          onFocus={(e) => (e.target.style.borderColor = C.primary)}
-          onBlur={(e) => (e.target.style.borderColor = C.border)}
-        />
-
-        {status && <p style={{ margin: 0, fontSize: 12, color: C.muted }}>{status}</p>}
-
-        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          {results.map(([code, name]) => (
-            <div
-              key={code}
-              onClick={() => copyCode(code)}
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 12,
-                padding: "10px 14px",
-                border: `1px solid ${C.border}`,
-                borderRadius: 8,
-                cursor: "pointer",
-                background: C.white,
-                transition: "background 0.1s",
-              }}
-              onMouseEnter={(e) => (e.currentTarget.style.background = C.bg)}
-              onMouseLeave={(e) => (e.currentTarget.style.background = C.white)}
-            >
-              <span style={{ fontFamily: "monospace", fontSize: 12, background: C.primaryLight, color: C.primary, padding: "3px 8px", borderRadius: 6, whiteSpace: "nowrap", fontWeight: 700 }}>
-                {code}
-              </span>
-              <span style={{ fontSize: 13, flex: 1, color: C.text }}>{name}</span>
-              <span style={{ fontSize: 11, color: copied === code ? C.success : C.muted, fontWeight: copied === code ? 700 : 400 }}>
-                {copied === code ? "✓ copied" : "copy"}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div style={{ flexShrink: 0, padding: "10px 18px", borderTop: `1px solid ${C.border}`, background: C.bg, fontSize: 11, color: "#aaa", textAlign: "center" }}>
-        ⚕️ For reference only. Always verify codes with a certified medical coder.
-      </div>
-    </div>
-  );
-}
-
-// ─── FloatingButton ───────────────────────────────────────────────────────────
-// Defined OUTSIDE the main component so React never remounts it on re-render.
-function FloatingButton({ onOpen }) {
-  return (
-    <button
-      onClick={onOpen}
-      title="ICD-10 Coding Assistant"
-      style={{
-        position: "fixed",
-        bottom: 28,
-        right: 28,
-        zIndex: 99998,
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        padding: "10px 18px",
-        borderRadius: 999,
-        border: "none",
-        background: `linear-gradient(135deg, ${C.primary} 0%, ${C.teal} 100%)`,
-        color: C.white,
-        fontFamily: FONT,
-        fontWeight: 700,
-        fontSize: 13,
-        cursor: "pointer",
-        boxShadow: "0 4px 16px rgba(76,77,220,0.35)",
-        transition: "transform 0.15s ease, box-shadow 0.15s ease",
-      }}
-      onMouseEnter={(e) => {
-        e.currentTarget.style.transform = "translateY(-2px)";
-        e.currentTarget.style.boxShadow = "0 8px 24px rgba(76,77,220,0.4)";
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.transform = "translateY(0)";
-        e.currentTarget.style.boxShadow = "0 4px 16px rgba(76,77,220,0.35)";
-      }}
-    >
-      <span style={{ fontSize: 18 }}>🩺</span>
-      ICD-10 Assistant
-    </button>
-  );
-}
-
-// ─── Panel ────────────────────────────────────────────────────────────────────
-// Defined OUTSIDE the main component so its DOM is never torn down on re-render.
-function Panel({
-  panelRef,
-  textareaRef,
-  query,
-  loading,
-  result,
-  error,
-  history,
-  copy,
-  copiedKey,
-  onQueryChange,
-  onKeyDown,
-  onSubmit,
-  onClear,
-  onClose,
-  onHistoryClick,
-  mode,
-  onModeChange,
-}) {
-  const allCodesText =
-    result?.matches?.map((m) => `${m.code} — ${m.description}`).join("\n") || "";
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        bottom: 28,
-        right: 28,
-        zIndex: 99999,
-        width: "min(480px, calc(100vw - 32px))",
-        maxHeight: "calc(100vh - 56px)",
-        display: "flex",
-        flexDirection: "column",
-        background: C.white,
-        borderRadius: 16,
-        boxShadow: "0 12px 48px rgba(0,0,0,0.18)",
-        fontFamily: FONT,
-        overflow: "hidden",
-        animation: "icd-slide-in 0.2s ease",
-      }}
-      ref={panelRef}
-    >
-      <style>{`
-        @keyframes icd-slide-in {
-          from { opacity: 0; transform: translateY(20px) scale(0.97); }
-          to   { opacity: 1; transform: translateY(0)    scale(1);    }
-        }
-      `}</style>
-
-      {/* ── Header ── */}
-      <div
-        style={{
-          background: `linear-gradient(135deg, ${C.primary} 0%, ${C.teal} 100%)`,
-          padding: "14px 18px",
-          flexShrink: 0,
-        }}
-      >
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-            <span style={{ fontSize: 22 }}>🩺</span>
-            <div>
-              <div style={{ color: C.white, fontWeight: 700, fontSize: 15, lineHeight: 1.2 }}>
-                ICD-10 Coding Assistant
-              </div>
-              <div style={{ color: "rgba(255,255,255,0.75)", fontSize: 11 }}>
-                AI-powered · Medical coding helper
-              </div>
-            </div>
-          </div>
-          <button
-            onClick={onClose}
-            style={{
-              background: "rgba(255,255,255,0.2)",
-              border: "1px solid rgba(255,255,255,0.3)",
-              borderRadius: 8,
-              color: C.white,
-              cursor: "pointer",
-              fontSize: 18,
-              fontWeight: "bold",
-              width: 32,
-              height: 32,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0,
-            }}
-          >
-            ×
-          </button>
-        </div>
-        <ModeToggle mode={mode} onChange={onModeChange} />
-      </div>
-
-      {/* ── Scrollable body ── */}
-      <div
-        style={{
-          overflowY: "auto",
-          flex: 1,
-          padding: "18px 18px 0",
-          display: "flex",
-          flexDirection: "column",
-          gap: 14,
-        }}
-      >
-        {/* Helper text */}
-        <p style={{ margin: 0, fontSize: 13, color: C.muted, lineHeight: 1.6 }}>
-          Describe a diagnosis, condition, or procedure in plain language and get
-          relevant ICD-10 code suggestions for insurance and billing.
-        </p>
-
-        {/* Textarea */}
-        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <label
-            style={{ fontSize: 12, fontWeight: 600, color: C.text }}
-            htmlFor="icd10-query"
-          >
-            Diagnosis / Condition / Procedure
-          </label>
-          <textarea
-            id="icd10-query"
-            ref={textareaRef}
-            value={query}
-            onChange={onQueryChange}
-            onKeyDown={onKeyDown}
-            placeholder="e.g. Type 2 diabetes with hypertension, chest pain on exertion, rotator cuff repair…"
-            rows={3}
-            style={{
-              width: "100%",
-              padding: "10px 12px",
-              border: `1.5px solid ${C.border}`,
-              borderRadius: 8,
-              fontSize: 13,
-              fontFamily: FONT,
-              color: C.text,
-              resize: "vertical",
-              outline: "none",
-              boxSizing: "border-box",
-              lineHeight: 1.5,
-              transition: "border-color 0.15s",
-            }}
-            onFocus={(e) => (e.target.style.borderColor = C.primary)}
-            onBlur={(e) => (e.target.style.borderColor = C.border)}
-          />
-          <div style={{ fontSize: 11, color: "#aaa", textAlign: "right" }}>
-            Press <kbd style={{ background: "#f3f4f6", padding: "1px 5px", borderRadius: 3, fontFamily: "monospace" }}>⌘ Enter</kbd> to submit
-          </div>
-        </div>
-
-        {/* Action buttons */}
-        <div style={{ display: "flex", gap: 8 }}>
-          <button
-            onClick={onSubmit}
-            disabled={!query.trim() || loading}
-            style={{
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 8,
-              padding: "10px 16px",
-              background:
-                !query.trim() || loading
-                  ? "#d1d5db"
-                  : `linear-gradient(135deg, ${C.primary} 0%, ${C.primaryDark} 100%)`,
-              color: C.white,
-              border: "none",
-              borderRadius: 8,
-              fontSize: 13,
-              fontWeight: 700,
-              fontFamily: FONT,
-              cursor: !query.trim() || loading ? "not-allowed" : "pointer",
-              transition: "background 0.15s",
-            }}
-          >
-            {loading ? (
-              <>
-                <Spinner />
-                Searching codes…
-              </>
-            ) : (
-              "🔍 Find ICD-10 Codes"
-            )}
-          </button>
-          {(query || result) && (
-            <button
-              onClick={onClear}
-              style={{
-                padding: "10px 14px",
-                background: C.bg,
-                border: `1px solid ${C.border}`,
-                borderRadius: 8,
-                fontSize: 13,
-                fontWeight: 600,
-                fontFamily: FONT,
-                color: C.muted,
-                cursor: "pointer",
-              }}
-            >
-              Clear
-            </button>
-          )}
-        </div>
-
-        {/* Error */}
-        {error && (
-          <div
-            style={{
-              background: C.errorLight,
-              border: `1px solid #fca5a5`,
-              borderRadius: 8,
-              padding: "10px 14px",
-              fontSize: 13,
-              color: C.error,
-              display: "flex",
-              gap: 8,
-            }}
-          >
-            <span>⚠️</span>
-            <span>{error}</span>
-          </div>
-        )}
-
-        {/* Results */}
-        {result && (
-          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-            {/* Results header */}
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                <span style={{ fontSize: 13, fontWeight: 700, color: C.text }}>
-                  Suggested Codes
-                </span>
-                <Badge color={C.teal} bg={C.tealLight}>
-                  {result.matches.length} match{result.matches.length !== 1 ? "es" : ""}
-                </Badge>
-              </div>
-              {result.matches.length > 0 && (
-                <CopyButton
-                  text={allCodesText}
-                  label="All"
-                  copyKey="copy-all"
-                  copiedKey={copiedKey}
-                  copy={copy}
-                />
-              )}
-            </div>
-
-            {/* No matches */}
-            {result.matches.length === 0 && (
-              <div
-                style={{
-                  padding: "20px",
-                  textAlign: "center",
-                  color: C.muted,
-                  fontSize: 13,
-                  background: C.bg,
-                  borderRadius: 10,
-                }}
-              >
-                No matching ICD-10 codes found.
-              </div>
-            )}
-
-            {/* Code cards */}
-            {result.matches.map((match, i) => (
-              <ResultCard
-                key={i}
-                index={i}
-                match={match}
-                copy={copy}
-                copiedKey={copiedKey}
-              />
-            ))}
-
-            {/* Clinical note — temporarily hidden, re-enable when UX is confirmed */}
-            {/* {result.note && (
-              <div
-                style={{
-                  background: C.primaryLight,
-                  border: `1px solid #c7d2fe`,
-                  borderRadius: 8,
-                  padding: "10px 14px",
-                  fontSize: 12,
-                  color: C.primaryDark,
-                  lineHeight: 1.5,
-                }}
-              >
-                📋 <strong>Coding note:</strong> {result.note}
-              </div>
-            )} */}
-          </div>
-        )}
-
-        {/* Search history */}
-        {history.length > 0 && (
-          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-            <span style={{ fontSize: 11, fontWeight: 600, color: "#aaa", textTransform: "uppercase", letterSpacing: "0.5px" }}>
-              Recent searches
-            </span>
-            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
-              {history.map((item, i) => (
-                <HistoryChip key={i} item={item} onClick={onHistoryClick} />
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* ── Footer disclaimer ── */}
-      <div
-        style={{
-          flexShrink: 0,
-          padding: "12px 18px",
-          borderTop: `1px solid ${C.border}`,
-          background: C.bg,
-          fontSize: 11,
-          color: "#aaa",
-          lineHeight: 1.5,
-          textAlign: "center",
-        }}
-      >
-        ⚕️ For reference only. Always verify codes with a certified medical coder.
-        Not a substitute for clinical judgment or official coding guidelines.
-      </div>
-    </div>
-  );
-}
-
-// ─── Main Component ────────────────────────────────────────────────────────────
-export default function ICD10Assistant() {
-  const [open, setOpen] = useState(false);
-  const [mode, setMode] = useState("nlm"); // "nlm" | "ai"
-  const [query, setQuery] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState(null);
-  const [error, setError] = useState(null);
-  const [history, setHistory] = useState([]);
-
-  const textareaRef = useRef(null);
-  const panelRef = useRef(null);
-  const { copy, copiedKey } = useClipboard();
-
-  // Focus textarea when panel opens
-  useEffect(() => {
-    if (open && textareaRef.current) {
-      setTimeout(() => textareaRef.current?.focus(), 80);
-    }
-  }, [open]);
-
-  // Close panel on outside click
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (panelRef.current && !panelRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-
-  const handleSubmit = useCallback(async () => {
-    if (!query.trim() || loading) return;
-    setLoading(true);
-    setError(null);
-    setResult(null);
-    try {
-      const data = await getICDSuggestions(query.trim(), ICD_MODE.CLAUDE_ONLY);
-      setResult(data);
-      setHistory((prev) => {
-        const filtered = prev.filter(
-          (h) => h.query.toLowerCase() !== query.trim().toLowerCase()
-        );
-        return [{ query: query.trim(), matches: data.matches }, ...filtered].slice(0, MAX_HISTORY);
-      });
-    } catch (err) {
-      setError(err.message || "Something went wrong. Please try again.");
-    } finally {
-      setLoading(false);
-    }
-  }, [query, loading]);
-
-  const handleKeyDown = useCallback(
-    (e) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-        e.preventDefault();
-        handleSubmit();
-      }
-    },
-    [handleSubmit]
-  );
-
-  const handleClear = useCallback(() => {
-    setQuery("");
-    setResult(null);
-    setError(null);
-    textareaRef.current?.focus();
-  }, []);
-
-  const handleHistoryClick = useCallback((q) => {
-    setQuery(q);
-    setResult(null);
-    setError(null);
-    textareaRef.current?.focus();
-  }, []);
-
-  const handleQueryChange = useCallback((e) => setQuery(e.target.value), []);
-
-  return (
-    <>
-      {!open && <FloatingButton onOpen={() => setOpen(true)} />}
-      {open && mode === "nlm" && (
-        <NLMLookupPanel
-          panelRef={panelRef}
-          onClose={() => setOpen(false)}
-          mode={mode}
-          onModeChange={setMode}
-        />
-      )}
-      {open && mode === "ai" && (
-        <Panel
-          panelRef={panelRef}
-          textareaRef={textareaRef}
-          query={query}
-          loading={loading}
-          result={result}
-          error={error}
-          history={history}
-          copy={copy}
-          copiedKey={copiedKey}
-          onQueryChange={handleQueryChange}
-          onKeyDown={handleKeyDown}
-          onSubmit={handleSubmit}
-          onClear={handleClear}
-          onClose={() => setOpen(false)}
-          onHistoryClick={handleHistoryClick}
-          mode={mode}
-          onModeChange={setMode}
-        />
-      )}
-    </>
-  );
-}
+/**
+ * ICD10Assistant.jsx
+ * AI-powered ICD-10 coding assistant panel.
+ * Floats as a pill button; expands into a full panel on click.
+ */
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { getICDSuggestions, ICD_MODE } from "../services/icdService";
+import { useClipboard } from "../hooks/useClipboard";
+import { IMG, ICON } from "../assets/icons/icdIcons";
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+const MAX_HISTORY = 3;
+const FONT = '"Nunito", sans-serif';
+
+// ─── Colour tokens ────────────────────────────────────────────────────────────
+const C = {
+  primary: "#4C4DDC",
+  primaryDark: "#3A3BBD",
+  primaryLight: "#E8EEF4",
+  teal: "#1CC3CE",
+  tealLight: "#E0F8F9",
+  success: "#16a34a",
+  successLight: "#dcfce7",
+  error: "#dc2626",
+  errorLight: "#fee2e2",
+  warn: "#d97706",
+  warnLight: "#fef3c7",
+  text: "#1a1a1a",
+  muted: "#666",
+  border: "#E5E5E5",
+  bg: "#F5F5F7",
+  white: "#FFFFFF",
+};
+
+// ─── Tiny helpers ─────────────────────────────────────────────────────────────
+function Badge({ children, color = C.primary, bg = C.primaryLight }) {
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 10px",
+        borderRadius: "999px",
+        fontSize: "12px",
+        fontWeight: 700,
+        color,
+        background: bg,
+        letterSpacing: "0.5px",
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+function Spinner() {
+  return (
+    <>
+      <style>{`@keyframes icd-spin{to{transform:rotate(360deg)}}`}</style>
+      <div
+        style={{
+          width: 20,
+          height: 20,
+          border: "2.5px solid #d1d5db",
+          borderTop: `2.5px solid ${C.primary}`,
+          borderRadius: "50%",
+          animation: "icd-spin 0.8s linear infinite",
+          flexShrink: 0,
+        }}
+      />
+    </>
+  );
+}
+
+function CopyButton({ text, label = "Copy", copyKey, copiedKey, copy }) {
+  const copied = copiedKey === copyKey;
+  return (
+    <button
+      onClick={() => copy(text, copyKey)}
+      title={copied ? "Copied!" : `Copy ${label}`}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "3px 10px",
+        fontSize: 11,
+        fontWeight: 600,
+        fontFamily: FONT,
+        border: `1px solid ${copied ? C.success : C.border}`,
+        borderRadius: 5,
+        background: copied ? C.successLight : C.white,
+        color: copied ? C.success : C.muted,
+        cursor: "pointer",
+        transition: "all 0.15s ease",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {copied ? "✓ Copied" : `⎘ ${label}`}
+    </button>
+  );
+}
+
+// ─── Result Card ──────────────────────────────────────────────────────────────
+function ResultCard({ match, index, copy, copiedKey }) {
+  const cardCopyKey = `card-${index}`;
+  const fullText = `${match.code} — ${match.description}${match.reason ? `\nNote: ${match.reason}` : ""}`;
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${C.border}`,
+        borderRadius: 10,
+        padding: "14px 16px",
+        background: C.white,
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        boxShadow: "0 1px 4px rgba(0,0,0,0.06)",
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+          <Badge color={C.primary} bg={C.primaryLight}>
+            {match.code}
+          </Badge>
+          <span style={{ fontSize: 13, fontWeight: 600, color: C.text, lineHeight: 1.4 }}>
+            {match.description}
+          </span>
+        </div>
+        <CopyButton
+          text={fullText}
+          label={match.code}
+          copyKey={cardCopyKey}
+          copiedKey={copiedKey}
+          copy={copy}
+        />
+      </div>
+      {match.reason && (
+        <p style={{ margin: 0, fontSize: 12, color: C.muted, lineHeight: 1.5, paddingLeft: 2 }}>
+          {ICON.reason} {match.reason}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ─── History Chip ─────────────────────────────────────────────────────────────
+function HistoryChip({ item, onClick }) {
+  return (
+    <button
+      onClick={() => onClick(item.query)}
+      title={`Re-run: ${item.query}`}
+      style={{
+        padding: "4px 10px",
+        border: `1px solid ${C.border}`,
+        borderRadius: 999,
+        fontSize: 11,
+        fontFamily: FONT,
+        color: C.muted,
+        background: C.white,
+        cursor: "pointer",
+        maxWidth: 180,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        transition: "border-color 0.15s",
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.borderColor = C.primary)}
+      onMouseLeave={(e) => (e.currentTarget.style.borderColor = C.border)}
+    >
+      {ICON.history} {item.query}
+    </button>
+  );
+}
+
+// ─── Mode Toggle (tab bar) ──────────────────────────────────────────────────
+function ModeToggle({ mode, onChange }) {
+  const tab = (id, label, icon) => (
+    <button
+      onClick={() => onChange(id)}
+      style={{
+        flex: 1,
+        padding: "6px 0",
+        border: "none",
+        borderRadius: 6,
+        fontSize: 12,
+        fontWeight: 700,
+        fontFamily: FONT,
+        cursor: "pointer",
+        transition: "all 0.15s",
+        background: mode === id ? C.white : "transparent",
+        color: mode === id ? C.primary : "rgba(255,255,255,0.7)",
+        boxShadow: mode === id ? "0 1px 4px rgba(0,0,0,0.15)" : "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 5,
+      }}
+    >
+      <span>{icon}</span> {label}
+    </button>
+  );
+  return (
+    <div
+      style={{
+        display: "flex",
+        background: "rgba(255,255,255,0.15)",
+        borderRadius: 8,
+        padding: 3,
+        gap: 2,
+        marginTop: 10,
+      }}
+    >
+      {tab("nlm", "Quick Lookup", "")}
+      {tab("ai", "AI Suggest", "")}
+    </div>
+  );
+}
+
+// ─── NLM Lookup Panel ────────────────────────────────────────────────────────
+// Uses the free NLM Clinical Tables API — no API key, no credits needed.
+function NLMLookupPanel({ panelRef, onClose, mode, onModeChange }) {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [status, setStatus] = useState("");
+  const [copied, setCopied] = useState("");
+  const debounceRef = useRef(null);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    setTimeout(() => inputRef.current?.focus(), 80);
+  }, []);
+
+  const search = useCallback(async (term) => {
+    if (term.length < 2) {
+      setResults([]);
+      setStatus("");
+      return;
+    }
+    setStatus("Searching…");
+    try {
+      const data = await getICDSuggestions(term, ICD_MODE.ICD_ONLY);
+      const codes = (data.matches || []).map((m) => [m.code, m.description]);
+      setResults(codes);
+      setStatus(
+        codes.length === 0
+          ? "No matching codes found."
+          : `Showing ${codes.length} result${codes.length !== 1 ? "s" : ""}`
+      );
+    } catch (err) {
+      setStatus(err.message || "Could not fetch results. Check your connection.");
+      setResults([]);
+    }
+  }, []);
+
+  const handleChange = (e) => {
+    const val = e.target.value;
+    setQuery(val);
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => search(val.trim()), 300);
+  };
+
+  const copyCode = (code) => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(code);
+      setTimeout(() => setCopied(""), 2000);
+    });
+  };
+
+  return (
+    <div
+      ref={panelRef}
+      style={{
+        position: "fixed",
+        bottom: 28,
+        right: 28,
+        zIndex: 99999,
+        width: "min(480px, calc(100vw - 32px))",
+        maxHeight: "calc(100vh - 56px)",
+        display: "flex",
+        flexDirection: "column",
+        background: C.white,
+        borderRadius: 16,
+        boxShadow: "0 12px 48px rgba(0,0,0,0.18)",
+        fontFamily: FONT,
+        overflow: "hidden",
+        animation: "icd-slide-in 0.2s ease",
+      }}
+    >
+      <style>{`@keyframes icd-slide-in{from{opacity:0;transform:translateY(20px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}`}</style>
+
+      {/* Header */}
+      <div style={{ background: `linear-gradient(135deg, ${C.primary} 0%, ${C.teal} 100%)`, padding: "14px 18px", flexShrink: 0 }}>
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            <img src={IMG.icdIcon} alt="ICD-10" style={{ width: 32, height: 32, objectFit: "contain" }} />
+            <div>
+              <div style={{ color: C.white, fontWeight: 700, fontSize: 15, lineHeight: 1.2 }}>ICD-10 Coding Assistant</div>
+              <div style={{ color: "rgba(255,255,255,0.75)", fontSize: 11 }}>Quick ICD-10 lookup</div>
+            </div>
+          </div>
+          <button onClick={onClose} style={{ background: "rgba(255,255,255,0.2)", border: "1px solid rgba(255,255,255,0.3)", borderRadius: 8, color: C.white, cursor: "pointer", fontSize: 18, fontWeight: "bold", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center" }}>×</button>
+        </div>
+        <ModeToggle mode={mode} onChange={onModeChange} />
+      </div>
+
+      {/* Body */}
+      <div style={{ flex: 1, overflowY: "auto", padding: "16px 18px", display: "flex", flexDirection: "column", gap: 10 }}>
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={handleChange}
+          placeholder="Type a diagnosis, e.g. diabetes, hypertension…"
+          style={{
+            width: "100%",
+            padding: "10px 14px",
+            fontSize: 14,
+            fontFamily: FONT,
+            border: `1.5px solid ${C.border}`,
+            borderRadius: 8,
+            outline: "none",
+            boxSizing: "border-box",
+            transition: "border-color 0.15s",
+          }}
+          onFocus={(e) => (e.target.style.borderColor = C.primary)}
+          onBlur={(e) => (e.target.style.borderColor = C.border)}
+        />
+
+        {/* Persistent note */}
+        <p style={{ margin: 0, fontSize: 11, color: "#aaa", lineHeight: 1.6, borderLeft: `3px solid ${C.border}`, paddingLeft: 8 }}>
+          <strong>Note:</strong> Use short, specific keywords for better results, or try{" "}
+          <button
+            onClick={() => onModeChange("ai")}
+            style={{
+              background: "none",
+              border: "none",
+              padding: 0,
+              color: C.primary,
+              fontWeight: 700,
+              fontSize: 11,
+              cursor: "pointer",
+              textDecoration: "underline",
+              fontFamily: FONT,
+            }}
+          >
+            AI Suggest
+          </button>{" "}
+          for broader symptom-based recommendations.
+        </p>
+
+        {/* Status — only show while searching or when results found */}
+        {status && results.length > 0 && (
+          <p style={{ margin: 0, fontSize: 12, color: C.muted }}>{status}</p>
+        )}
+
+        {/* No results state */}
+        {status === "No matching codes found." && results.length === 0 && (
+          <div
+            style={{
+              background: C.warnLight,
+              border: `1px solid #fcd34d`,
+              borderRadius: 10,
+              padding: "14px 16px",
+              display: "flex",
+              gap: 10,
+              alignItems: "flex-start",
+            }}
+          >
+            <span style={{ fontSize: 18, flexShrink: 0 }}>🔍</span>
+            <div>
+              <p style={{ margin: "0 0 4px", fontSize: 13, fontWeight: 700, color: C.warn }}>
+                No results found
+              </p>
+              <p style={{ margin: 0, fontSize: 12, color: C.warn, lineHeight: 1.6 }}>
+                We couldn&apos;t find a match. Try using more accurate keywords or switch to{" "}
+                <button
+                  onClick={() => onModeChange("ai")}
+                  style={{
+                    background: "none",
+                    border: "none",
+                    padding: 0,
+                    color: C.primary,
+                    fontWeight: 700,
+                    fontSize: 12,
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                    fontFamily: FONT,
+                  }}
+                >
+                  AI Suggest
+                </button>{" "}
+                for better results.
+              </p>
+            </div>
+          </div>
+        )}
+
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {results.map(([code, name]) => (
+            <div
+              key={code}
+              onClick={() => copyCode(code)}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                padding: "10px 14px",
+                border: `1px solid ${C.border}`,
+                borderRadius: 8,
+                cursor: "pointer",
+                background: C.white,
+                transition: "background 0.1s",
+              }}
+              onMouseEnter={(e) => (e.currentTarget.style.background = C.bg)}
+              onMouseLeave={(e) => (e.currentTarget.style.background = C.white)}
+            >
+              <span style={{ fontFamily: "monospace", fontSize: 12, background: C.primaryLight, color: C.primary, padding: "3px 8px", borderRadius: 6, whiteSpace: "nowrap", fontWeight: 700 }}>
+                {code}
+              </span>
+              <span style={{ fontSize: 13, flex: 1, color: C.text }}>{name}</span>
+              <span style={{ fontSize: 11, color: copied === code ? C.success : C.muted, fontWeight: copied === code ? 700 : 400 }}>
+                {copied === code ? "✓ copied" : "copy"}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div style={{ flexShrink: 0, padding: "10px 18px", borderTop: `1px solid ${C.border}`, background: C.bg, fontSize: 11, color: "#aaa", textAlign: "center" }}>
+        {ICON.medical} For reference only. Always verify codes with a certified medical coder.
+      </div>
+    </div>
+  );
+}
+
+// ─── FloatingButton ───────────────────────────────────────────────────────────
+// Defined OUTSIDE the main component so React never remounts it on re-render.
+function FloatingButton({ onOpen }) {
+  return (
+    <button
+      onClick={onOpen}
+      title="ICD-10 Coding Assistant"
+      style={{
+        position: "fixed",
+        bottom: 28,
+        right: 28,
+        zIndex: 99998,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "10px 18px",
+        borderRadius: 999,
+        border: "none",
+        background: `linear-gradient(135deg, ${C.primary} 0%, ${C.teal} 100%)`,
+        color: C.white,
+        fontFamily: FONT,
+        fontWeight: 700,
+        fontSize: 13,
+        cursor: "pointer",
+        boxShadow: "0 4px 16px rgba(76,77,220,0.35)",
+        transition: "transform 0.15s ease, box-shadow 0.15s ease",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.transform = "translateY(-2px)";
+        e.currentTarget.style.boxShadow = "0 8px 24px rgba(76,77,220,0.4)";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.transform = "translateY(0)";
+        e.currentTarget.style.boxShadow = "0 4px 16px rgba(76,77,220,0.35)";
+      }}
+    >
+      <img src={IMG.icdIcon} alt="ICD-10" style={{ width: 22, height: 22, objectFit: "contain" }} />
+      ICD-10 Assistant
+    </button>
+  );
+}
+
+// ─── Panel ────────────────────────────────────────────────────────────────────
+// Defined OUTSIDE the main component so its DOM is never torn down on re-render.
+function Panel({
+  panelRef,
+  textareaRef,
+  query,
+  loading,
+  result,
+  error,
+  history,
+  copy,
+  copiedKey,
+  onQueryChange,
+  onKeyDown,
+  onSubmit,
+  onClear,
+  onClose,
+  onHistoryClick,
+  mode,
+  onModeChange,
+}) {
+  const allCodesText =
+    result?.matches?.map((m) => `${m.code} — ${m.description}`).join("\n") || "";
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: 28,
+        right: 28,
+        zIndex: 99999,
+        width: "min(480px, calc(100vw - 32px))",
+        maxHeight: "calc(100vh - 56px)",
+        display: "flex",
+        flexDirection: "column",
+        background: C.white,
+        borderRadius: 16,
+        boxShadow: "0 12px 48px rgba(0,0,0,0.18)",
+        fontFamily: FONT,
+        overflow: "hidden",
+        animation: "icd-slide-in 0.2s ease",
+      }}
+      ref={panelRef}
+    >
+      <style>{`
+        @keyframes icd-slide-in {
+          from { opacity: 0; transform: translateY(20px) scale(0.97); }
+          to   { opacity: 1; transform: translateY(0)    scale(1);    }
+        }
+      `}</style>
+
+      {/* ── Header ── */}
+      <div
+        style={{
+          background: `linear-gradient(135deg, ${C.primary} 0%, ${C.teal} 100%)`,
+          padding: "14px 18px",
+          flexShrink: 0,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            <img src={IMG.icdIcon} alt="ICD-10" style={{ width: 32, height: 32, objectFit: "contain" }} />
+            <div>
+              <div style={{ color: C.white, fontWeight: 700, fontSize: 15, lineHeight: 1.2 }}>
+                ICD-10 Coding Assistant
+              </div>
+              <div style={{ color: "rgba(255,255,255,0.75)", fontSize: 11 }}>
+                AI-powered · Medical coding helper
+              </div>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            style={{
+              background: "rgba(255,255,255,0.2)",
+              border: "1px solid rgba(255,255,255,0.3)",
+              borderRadius: 8,
+              color: C.white,
+              cursor: "pointer",
+              fontSize: 18,
+              fontWeight: "bold",
+              width: 32,
+              height: 32,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+            }}
+          >
+            ×
+          </button>
+        </div>
+        <ModeToggle mode={mode} onChange={onModeChange} />
+      </div>
+
+      {/* ── Scrollable body ── */}
+      <div
+        style={{
+          overflowY: "auto",
+          flex: 1,
+          padding: "18px 18px 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: 14,
+        }}
+      >
+        {/* Helper text */}
+        <p style={{ margin: 0, fontSize: 13, color: C.muted, lineHeight: 1.6 }}>
+          Describe a diagnosis, condition, or procedure in plain language and get
+          relevant ICD-10 code suggestions for insurance and billing.
+        </p>
+
+        {/* Textarea */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <label
+            style={{ fontSize: 12, fontWeight: 600, color: C.text }}
+            htmlFor="icd10-query"
+          >
+            Diagnosis / Condition / Procedure
+          </label>
+          <textarea
+            id="icd10-query"
+            ref={textareaRef}
+            value={query}
+            onChange={onQueryChange}
+            onKeyDown={onKeyDown}
+            placeholder="e.g. Type 2 diabetes with hypertension, chest pain on exertion, rotator cuff repair…"
+            rows={3}
+            style={{
+              width: "100%",
+              padding: "10px 12px",
+              border: `1.5px solid ${C.border}`,
+              borderRadius: 8,
+              fontSize: 13,
+              fontFamily: FONT,
+              color: C.text,
+              resize: "vertical",
+              outline: "none",
+              boxSizing: "border-box",
+              lineHeight: 1.5,
+              transition: "border-color 0.15s",
+            }}
+            onFocus={(e) => (e.target.style.borderColor = C.primary)}
+            onBlur={(e) => (e.target.style.borderColor = C.border)}
+          />
+          <div style={{ fontSize: 11, color: "#aaa", textAlign: "right" }}>
+            Press <kbd style={{ background: "#f3f4f6", padding: "1px 5px", borderRadius: 3, fontFamily: "monospace" }}>Enter</kbd> to submit · <kbd style={{ background: "#f3f4f6", padding: "1px 5px", borderRadius: 3, fontFamily: "monospace" }}>Shift+Enter</kbd> for new line
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div style={{ display: "flex", gap: 8 }}>
+          <button
+            onClick={onSubmit}
+            disabled={!query.trim() || loading}
+            style={{
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              padding: "10px 16px",
+              background:
+                !query.trim() || loading
+                  ? "#d1d5db"
+                  : `linear-gradient(135deg, ${C.primary} 0%, ${C.primaryDark} 100%)`,
+              color: C.white,
+              border: "none",
+              borderRadius: 8,
+              fontSize: 13,
+              fontWeight: 700,
+              fontFamily: FONT,
+              cursor: !query.trim() || loading ? "not-allowed" : "pointer",
+              transition: "background 0.15s",
+            }}
+          >
+            {loading ? (
+              <>
+                <Spinner />
+                Searching codes…
+              </>
+            ) : (
+              "Find ICD-10 Codes"
+            )}
+          </button>
+          {(query || result) && (
+            <button
+              onClick={onClear}
+              style={{
+                padding: "10px 14px",
+                background: C.bg,
+                border: `1px solid ${C.border}`,
+                borderRadius: 8,
+                fontSize: 13,
+                fontWeight: 600,
+                fontFamily: FONT,
+                color: C.muted,
+                cursor: "pointer",
+              }}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div
+            style={{
+              background: C.errorLight,
+              border: `1px solid #fca5a5`,
+              borderRadius: 8,
+              padding: "10px 14px",
+              fontSize: 13,
+              color: C.error,
+              display: "flex",
+              gap: 8,
+            }}
+          >
+            <span>⚠️</span>
+            <span>{error}</span>
+          </div>
+        )}
+
+        {/* Results */}
+        {result && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+            {/* Results header */}
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span style={{ fontSize: 13, fontWeight: 700, color: C.text }}>
+                  Suggested Codes
+                </span>
+                <Badge color={C.teal} bg={C.tealLight}>
+                  {result.matches.length} match{result.matches.length !== 1 ? "es" : ""}
+                </Badge>
+              </div>
+              {result.matches.length > 0 && (
+                <CopyButton
+                  text={allCodesText}
+                  label="All"
+                  copyKey="copy-all"
+                  copiedKey={copiedKey}
+                  copy={copy}
+                />
+              )}
+            </div>
+
+            {/* No matches */}
+            {result.matches.length === 0 && (
+              <div
+                style={{
+                  padding: "20px",
+                  textAlign: "center",
+                  color: C.muted,
+                  fontSize: 13,
+                  background: C.bg,
+                  borderRadius: 10,
+                }}
+              >
+                No matching ICD-10 codes found.
+              </div>
+            )}
+
+            {/* Code cards */}
+            {result.matches.map((match, i) => (
+              <ResultCard
+                key={i}
+                index={i}
+                match={match}
+                copy={copy}
+                copiedKey={copiedKey}
+              />
+            ))}
+
+            {/* Clinical note — temporarily hidden, re-enable when UX is confirmed */}
+            {/* {result.note && (
+              <div
+                style={{
+                  background: C.primaryLight,
+                  border: `1px solid #c7d2fe`,
+                  borderRadius: 8,
+                  padding: "10px 14px",
+                  fontSize: 12,
+                  color: C.primaryDark,
+                  lineHeight: 1.5,
+                }}
+              >
+                📋 <strong>Coding note:</strong> {result.note}
+              </div>
+            )} */}
+          </div>
+        )}
+
+        {/* Search history */}
+        {history.length > 0 && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            <span style={{ fontSize: 11, fontWeight: 600, color: "#aaa", textTransform: "uppercase", letterSpacing: "0.5px" }}>
+              Recent searches
+            </span>
+            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+              {history.map((item, i) => (
+                <HistoryChip key={i} item={item} onClick={onHistoryClick} />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ── Footer disclaimer ── */}
+      <div
+        style={{
+          flexShrink: 0,
+          padding: "12px 18px",
+          borderTop: `1px solid ${C.border}`,
+          background: C.bg,
+          fontSize: 11,
+          color: "#aaa",
+          lineHeight: 1.5,
+          textAlign: "center",
+        }}
+      >
+        {ICON.medical} For reference only. Always verify codes with a certified medical coder.
+        Not a substitute for clinical judgment or official coding guidelines.
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Component ────────────────────────────────────────────────────────────
+export default function ICD10Assistant() {
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState("nlm"); // "nlm" | "ai"
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  const [history, setHistory] = useState([]);
+
+  const textareaRef = useRef(null);
+  const panelRef = useRef(null);
+  const { copy, copiedKey } = useClipboard();
+
+  // Focus textarea when panel opens
+  useEffect(() => {
+    if (open && textareaRef.current) {
+      setTimeout(() => textareaRef.current?.focus(), 80);
+    }
+  }, [open]);
+
+  // Close panel on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!query.trim() || loading) return;
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const data = await getICDSuggestions(query.trim(), ICD_MODE.CLAUDE_ONLY);
+      setResult(data);
+      setHistory((prev) => {
+        const filtered = prev.filter(
+          (h) => h.query.toLowerCase() !== query.trim().toLowerCase()
+        );
+        return [{ query: query.trim(), matches: data.matches }, ...filtered].slice(0, MAX_HISTORY);
+      });
+    } catch (err) {
+      setError(err.message || "Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }, [query, loading]);
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+
+  const handleClear = useCallback(() => {
+    setQuery("");
+    setResult(null);
+    setError(null);
+    textareaRef.current?.focus();
+  }, []);
+
+  const handleHistoryClick = useCallback((q) => {
+    setQuery(q);
+    setResult(null);
+    setError(null);
+    textareaRef.current?.focus();
+  }, []);
+
+  const handleQueryChange = useCallback((e) => setQuery(e.target.value), []);
+
+  return (
+    <>
+      {!open && <FloatingButton onOpen={() => setOpen(true)} />}
+      {open && mode === "nlm" && (
+        <NLMLookupPanel
+          panelRef={panelRef}
+          onClose={() => setOpen(false)}
+          mode={mode}
+          onModeChange={setMode}
+        />
+      )}
+      {open && mode === "ai" && (
+        <Panel
+          panelRef={panelRef}
+          textareaRef={textareaRef}
+          query={query}
+          loading={loading}
+          result={result}
+          error={error}
+          history={history}
+          copy={copy}
+          copiedKey={copiedKey}
+          onQueryChange={handleQueryChange}
+          onKeyDown={handleKeyDown}
+          onSubmit={handleSubmit}
+          onClear={handleClear}
+          onClose={() => setOpen(false)}
+          onHistoryClick={handleHistoryClick}
+          mode={mode}
+          onModeChange={setMode}
+        />
+      )}
+    </>
+  );
+}