// components/rinpo-chat.jsx — store overlay chat (outside #/phone)

function RinpoChatPanel() {
  const store = useStore();
  const route = useRoute();
  const open = store.state.rinpoChat;

  if (route.name === 'phone' || (store.state.phoneOpen && store.isPhoneDesktop())) return null;
  if (!open || !window.RinpoAssets) return null;

  const close = () => store.closeRinpoChat();

  return (
    <div className="rinpo-chat-scrim rinpo-chat-scrim--dark" onClick={close} role="presentation">
      <div className="rinpo-chat rinpo-chat--dark rinpo-chat--overlay" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button type="button" className="rinpo-chat--overlay-close" onClick={close} aria-label="Close RINPO chat">
          <Icon name="close" />
        </button>
        <RinpoPhoneChat />
      </div>
    </div>
  );
}

window.RinpoChatPanel = RinpoChatPanel;