onChange(e.target.value)}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        placeholder={placeholder}
        rows={rows}
        autoFocus={autoFocus}
        maxLength={maxLength}
        style={{
          flex: 1, width: '100%',
          border: 'none', background: 'transparent',
          fontSize: 15, lineHeight: 1.5, color: theme.ink,
          outline: 'none', fontFamily: 'inherit',
          resize: 'vertical', minHeight: rows * 22,
          minWidth: 0,
        }}
      />
    </div>
  );
}

// Custom branded dropdown — replaces native <select> so we can fully style
// the options panel. Renders via React portal to document.body so it escapes
// any parent with overflow: hidden (the Body container, scroll wrappers, etc).
// Position is computed from the trigger button's getBoundingClientRect.
function Select({ value, onChange, options, theme, placeholder = '— select —', disabled = false, searchable }) {
  const [open, setOpen] = React.useState(false);
  const [focusIdx, setFocusIdx] = React.useState(-1);
  const [pos, setPos] = React.useState(null); // {left, top, width, dropUp}
  const [query, setQuery] = React.useState('');
  const triggerRef = React.useRef(null);
  const panelRef = React.useRef(null);
  const searchRef = React.useRef(null);

const norm = React.useMemo(() => options.map(o => (
    typeof o === 'object' ? { value: o.value, label: o.label } : { value: o, label: o }
  )), [options]);
  const selected = norm.find(o => String(o.value) === String(value));
  const displayLabel = selected ? selected.label : placeholder;
  const hasValue = !!selected;

// Auto-enable search when there are many options. Caller can force on/off.
  const showSearch = searchable !== undefined ? searchable : norm.length >= 8;
  const filtered = React.useMemo(() => {
    if (!showSearch || !query.trim()) return norm;
    const q = query.trim().toLowerCase();
    return norm.filter(o => String(o.label).toLowerCase().includes(q));
  }, [norm, query, showSearch]);

// Compute panel position from trigger rect. Prefers below; flips above if no room.
  const computePos = React.useCallback(() => {
    if (!triggerRef.current) return;
    const r = triggerRef.current.getBoundingClientRect();
    const PANEL_MAX = 280;
    const SPACE_BELOW = window.innerHeight - r.bottom;
    const SPACE_ABOVE = r.top;
    const dropUp = SPACE_BELOW < 200 && SPACE_ABOVE > SPACE_BELOW;
    setPos({
      left: r.left, top: dropUp ? r.top : r.bottom,
      width: r.width,
      maxHeight: Math.max(160, Math.min(PANEL_MAX, dropUp ? SPACE_ABOVE - 16 : SPACE_BELOW - 16)),
      dropUp,
    });
  }, []);

// Close on outside click / scroll / resize
  React.useEffect(() => {
    if (!open) return;
    computePos();
    const onDoc = (e) => {
      if (triggerRef.current && triggerRef.current.contains(e.target)) return;
      if (panelRef.current && panelRef.current.contains(e.target)) return;
      setOpen(false);
    };
    const onScroll = () => computePos();
    const onResize = () => computePos();
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('touchstart', onDoc);
    window.addEventListener('scroll', onScroll, true);
    window.addEventListener('resize', onResize);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('touchstart', onDoc);
      window.removeEventListener('scroll', onScroll, true);
      window.removeEventListener('resize', onResize);
    };
  }, [open, computePos]);

React.useEffect(() => {
    if (!open) { setFocusIdx(-1); setQuery(''); return; }
    const idx = filtered.findIndex(o => String(o.value) === String(value));
    setFocusIdx(idx >= 0 ? idx : 0);
    // Auto-focus the search box when opened (skips on touch keyboards via timeout)
    if (showSearch) {
      setTimeout(() => { try { searchRef.current?.focus(); } catch (_e) {} }, 0);
    }
  }, [open]);

// Reset focus when filter changes
  React.useEffect(() => {
    if (!open) return;
    setFocusIdx(filtered.length > 0 ? 0 : -1);
  }, [query]);

return (
    <>
      <button
        ref={triggerRef}
        type="button"
        disabled={disabled}
        onClick={() => !disabled && setOpen(o => !o)}
        onKeyDown={onKey}
        aria-haspopup="listbox"
        aria-expanded={open}
        className="cabt-btn-press"
        style={{
          display: 'flex', alignItems: 'center', gap: 8,
          width: '100%', height: 48,
          background: theme.bgElev,
          border: `1px solid ${open ? theme.accent : theme.rule}`,
          borderRadius: 12, padding: '0 14px',
          transition: 'border-color 0.18s ease, box-shadow 0.18s ease',
          boxShadow: open ? `0 0 0 3px ${theme.accent}33` : 'none',
          cursor: disabled ? 'not-allowed' : 'pointer',
          opacity: disabled ? 0.5 : 1,
          fontFamily: 'inherit', fontSize: 16,
          color: hasValue ? theme.ink : theme.inkMuted,
          textAlign: 'left',
          WebkitTapHighlightColor: 'transparent',
        }}
      >
        <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {displayLabel}
        </span>
        <span style={{
          display: 'inline-flex',
          transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
          transition: 'transform 0.18s ease',
          color: theme.inkMuted,
        }}>
          <Icon name="chev-d" size={16}/>
        </span>
      </button>
      {/* Render panel via portal so it escapes any parent with overflow: hidden */}
      {panel && typeof document !== 'undefined' && ReactDOM.createPortal(panel, document.body)}
    </>
  );
}

function Toggle({ value, onChange, theme }) {
  return (
    <button
      type="button"
      onClick={() => onChange(!value)}
      style={{
        position: 'relative', width: 52, height: 30, borderRadius: 999,
        background: value ? theme.accent : 'rgba(0,0,0,0.18)',
        border: 'none', cursor: 'pointer', padding: 0,
        transition: 'background .15s', flexShrink: 0,
      }}
    >
      <span style={{
        position: 'absolute', top: 3, left: value ? 25 : 3,
        width: 24, height: 24, borderRadius: 999, background: '#fff',
        boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
        transition: 'left .15s',
      }} />
    </button>
  );
}

function StarRating({ value, onChange, theme }) {
  return (
    <div style={{ display: 'flex', gap: 6 }}>
      {[1, 2, 3, 4, 5].map(n => (
        <button
          key={n}
          type="button"
          onClick={() => onChange(n)}
          style={{
            width: 44, height: 44, border: 'none', background: 'transparent',
            cursor: 'pointer', padding: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
        >
          <Icon
            name={n <= value ? 'star-fill' : 'star'}
            size={28}
            color={n <= value ? theme.gold : theme.inkMuted}
          />
        </button>
      ))}
    </div>
  );
}

// ── Banner / Alert ──────────────────────────────────────────────────────────
function Banner({ tone = 'warning', icon = 'alert', title, children, action, onAction, theme }) {
  const tones = {
    warning: { bg: 'rgba(249,168,37,0.10)', fg: '#8C5A00', border: 'rgba(249,168,37,0.35)' },
    error:   { bg: 'rgba(229,57,53,0.08)',  fg: '#A6322F', border: 'rgba(229,57,53,0.3)' },
    info:    { bg: 'rgba(14,26,53,0.05)',   fg: theme.ink, border: theme.rule },
    success: { bg: 'rgba(67,160,71,0.10)',  fg: '#2E7D32', border: 'rgba(67,160,71,0.3)' },
  };
  const t = tones[tone];
  return (
    <div style={{
      background: t.bg, color: t.fg, border: `1px solid ${t.border}`,
      borderRadius: theme.radius - 2, padding: '12px 14px',
      display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14,
    }}>
      <div style={{ flexShrink: 0, paddingTop: 1 }}>
        <Icon name={icon} size={18} />
      </div>
      <div style={{ flex: 1, lineHeight: 1.4 }}>
        {title && <div style={{ fontWeight: 700, marginBottom: 2 }}>{title}</div>}
        {children}
      </div>
      {action && (
        <button
          onClick={onAction}
          style={{
            background: 'transparent', border: 'none', color: t.fg,
            fontSize: 13, fontWeight: 700, cursor: 'pointer', padding: 4,
            whiteSpace: 'nowrap', textDecoration: 'underline',
          }}
        >{action}</button>
      )}
    </div>
  );
}

// ── Tabs ────────────────────────────────────────────────────────────────────
// The strip scrolls sideways when the labels do not fit, which used to mean the
// selected tab could sit off-screen with nothing to say so. It also announced
// itself as a row of ordinary buttons, and arrow keys did nothing — a keyboard
// user had to Tab through every tab to reach the last one.
function Tabs({ tabs, value, onChange, theme, label = 'Sections' }) {
  const strip = React.useRef(null);
  const selected = React.useRef(null);

React.useEffect(() => {
    // Keep the chosen tab in view after it changes, however it changed.
    const node = selected.current;
    if (node && node.scrollIntoView) {
      node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
    }
  }, [value]);

function onKeyDown(e) {
    const order = tabs.map(t => t.value);
    const at = order.indexOf(value);
    let next = null;
    if (e.key === 'ArrowRight') next = order[(at + 1) % order.length];
    else if (e.key === 'ArrowLeft') next = order[(at - 1 + order.length) % order.length];
    else if (e.key === 'Home') next = order[0];
    else if (e.key === 'End') next = order[order.length - 1];
    if (next == null) return;
    e.preventDefault();
    onChange(next);
    // Move focus with the selection, so the next arrow press continues from here.
    const el = strip.current && strip.current.querySelector(`[data-tab="${next}"]`);
    if (el) el.focus();
  }

return (
    <div
      ref={strip}
      role="tablist"
      aria-label={label}
      onKeyDown={onKeyDown}
      style={{
        display: 'flex', gap: 0, borderBottom: `1px solid ${theme.rule}`,
        overflowX: 'auto', WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none',
      }}
    >
      {tabs.map(t => {
        const active = t.value === value;
        return (
          <button
            key={t.value}
            ref={active ? selected : null}
            data-tab={t.value}
            role="tab"
            type="button"
            aria-selected={active}
            // Roving tabindex: one stop for the whole strip, arrows do the rest.
            tabIndex={active ? 0 : -1}
            onClick={() => onChange(t.value)}
            style={{
              padding: '12px 14px', border: 'none', background: 'transparent',
              fontSize: 14, fontWeight: active ? 700 : 500,
              color: active ? theme.ink : theme.inkMuted,
              borderBottom: `2px solid ${active ? theme.accent : 'transparent'}`,
              cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap',
              marginBottom: -1,
            }}
          >{t.label}</button>
        );
      })}
    </div>
  );
}

// ── Dialog behaviour ────────────────────────────────────────────────────────
// Every modal in the app opened, and then left the keyboard behind: Escape did
// nothing, Tab walked out of the dialog into the page underneath, the page
// scrolled behind the scrim, and on close focus landed back at the top of the
// document instead of on whatever opened it. One hook, so a modal only has to
// remember to call it.
function useDialog(open, onClose, boxRef) {
  React.useEffect(() => {
    if (!open) return undefined;

const opener = document.activeElement;
    const { overflow } = document.body.style;
    document.body.style.overflow = 'hidden';

const focusable = () => {
      const box = boxRef && boxRef.current;
      if (!box) return [];
      return [...box.querySelectorAll(
        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]),'
        + ' textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
      )].filter(el => el.offsetParent !== null);
    };

// Give the dialog the focus, unless something in it already asked for it.
    const first = focusable()[0];
    const box = boxRef && boxRef.current;
    if (box && !box.contains(document.activeElement) && first) first.focus();

document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = overflow;
      if (opener && opener.focus) opener.focus();
    };
  }, [open, onClose, boxRef]);
}

// ── Branded confirm dialog (replaces native window.confirm) ──────────────
// Renders centered on viewport via portal, sized for both mobile + desktop.
// Backdrop click + Escape both cancel.
function ConfirmDialog({ open, theme, title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', danger = false, onConfirm, onCancel }) {
  const box = React.useRef(null);
  // Escape, the focus trap, the scroll lock and returning focus to whatever
  // opened this all live in one place now.
  useDialog(open, onCancel, box);

if (!open) return null;

const dangerColor = '#C62828';
  const dialog = (
    <div
      onClick={onCancel}
      role="dialog"
      aria-modal="true"
      aria-labelledby="cabt-confirm-title"
      style={{
        position: 'fixed', inset: 0,
        background: 'rgba(8, 12, 24, 0.55)',
        backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
        zIndex: 2000,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding:
          'max(env(safe-area-inset-top), 20px)' +
          ' max(env(safe-area-inset-right), 20px)' +
          ' max(env(safe-area-inset-bottom), 20px)' +
          ' max(env(safe-area-inset-left), 20px)',
        animation: 'scrimIn 0.18s ease',
      }}
    >
      <div
        ref={box}
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%', maxWidth: 400,
          background: theme.bg, color: theme.ink,
          borderRadius: 18,
          padding: '24px 22px 20px',
          boxShadow: '0 24px 60px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.14)',
          animation: 'modalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1)',
          fontFamily: theme.sans,
        }}
      >
        <div id="cabt-confirm-title" style={{
          fontFamily: theme.serif || 'inherit',
          fontSize: 20, fontWeight: 600, color: theme.ink,
          letterSpacing: -0.3, lineHeight: 1.25, marginBottom: 8,
        }}>{title}</div>
        {message && (
          <div style={{
            fontSize: 14, color: theme.inkMuted, lineHeight: 1.55, marginBottom: 22,
          }}>{message}</div>
        )}
        <div style={{ display: 'flex', gap: 10 }}>
          <button
            type="button"
            onClick={onCancel}
            className="cabt-btn-press"
            style={{
              flex: 1, padding: '13px 16px', borderRadius: 12,
              background: 'transparent', color: theme.ink,
              border: `1.5px solid ${theme.rule}`,
              fontFamily: 'inherit', fontSize: 14.5, fontWeight: 600,
              cursor: 'pointer', WebkitTapHighlightColor: 'transparent',
            }}
          >{cancelLabel}</button>
          <button
            type="button"
            onClick={onConfirm}
            autoFocus
            className="cabt-btn-press"
            style={{
              flex: 1.2, padding: '13px 16px', borderRadius: 12,
              background: danger ? dangerColor : theme.accent,
              color: danger ? '#FFFFFF' : theme.accentInk,
              border: 'none',
              fontFamily: 'inherit', fontSize: 14.5, fontWeight: 700,
              cursor: 'pointer', WebkitTapHighlightColor: 'transparent',
              boxShadow: danger
                ? '0 4px 12px rgba(198,40,40,0.30)'
                : `0 4px 12px ${theme.accent}55`,
            }}
          >{confirmLabel}</button>
        </div>
      </div>
    </div>
  );

return (typeof document !== 'undefined' && ReactDOM.createPortal)
    ? ReactDOM.createPortal(dialog, document.body)
    : dialog;
}

Object.assign(window, {
  THEMES, STATUS, Icon, StatusPill, ScoreRing, Card, Button,
  Field, Input, Textarea, Select, Toggle, StarRating, Banner, Tabs,
  ConfirmDialog, useDialog,
});