import React, { useState, useEffect, useRef } from 'react'; // ── 인라인 문의 폼 (AI 버블 내부) ────────────────────────────────── function InlineContactForm({ conversationId, setConversationId, initialShowPlan = false, onSwitchForm }) { const SOLUTION_OPTIONS = [ '정보보안 규정관리 솔루션 MISO', '개인정보 위·수탁 운영관리 솔루션 MISO CMS', '정보보안 활동관리 솔루션 MISO SA', '정보보안 포털 MISO Portal', '시스템취약점 자동진단 솔루션 VADA', '기타', ]; const CONSULTING_OPTIONS = [ 'ISMS-P 인증 컨설팅', 'ISO27001 인증컨설팅', '개인정보보호컨설팅', '기타 컨설팅', ]; const PRIVACY_CONFIG = { title: '수집하는 개인정보의 항목', intro: '회사는 상담, 서비스 신청 등등을 위해 아래와 같은 개인정보를 수집하고 있습니다.', collectionItems: '* 수집항목 : 회사명, 부서명, 이름, 직급, 연락처, 이메일, 회사규모(견적 산정 참고용)', collectionMethod: '* 개인정보 수집방법 : 홈페이지 제품문의', purposeTitle: '개인정보의 수집 및 이용목적', purposeIntro: '회사는 수집한 개인정보를 다음의 목적을 위해 활용합니다.', purposeItems: '* 제품문의에 대한 상담', retentionTitle: '개인정보의 보유 및 이용기간', retentionContent: '회사는 개인정보 수집 및 이용목적이 달성된 후에는 예외없이 해당 정보를 파기합니다.', disagreementTitle: '개인정보의 수집 비동의', disagreementContent: '개인정보 수집에 동의하지 않는 경우 상담 문의를 하실 수 없습니다.', }; const [formData, setFormData] = useState({ name: '', email: '', company: '', department: '', position: '', phone: '', solutions: [], consultings: [], message: '', privacyConsent: null, }); const [isLoading, setIsLoading] = useState(false); const [submitStatus, setSubmitStatus] = useState(null); const [statusMsg, setStatusMsg] = useState(''); const [formStartTime, setFormStartTime] = useState(null); const handleChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const handleCheckboxChange = (category, value) => { setFormData(prev => { const current = prev[category] || []; const next = current.includes(value) ? current.filter(v => v !== value) : [...current, value]; return { ...prev, [category]: next }; }); }; const getEmailBody = (fd) => { const solutionsText = fd.solutions && fd.solutions.length > 0 ? fd.solutions.join(', ') : '미선택'; const consultingsText = fd.consultings && fd.consultings.length > 0 ? fd.consultings.join(', ') : '미선택'; return `[제이시큐어플랫폼 홈페이지 문의 폼 접수] 내용: 이름: ${fd.name} 회사명: ${fd.company} 부서명: ${fd.department || '미입력'} 직급: ${fd.position || '미입력'} 이메일: ${fd.email} 전화번호: ${fd.phone} 상담희망 솔루션: ${solutionsText} 상담희망 컨설팅: ${consultingsText} 문의 내용: ${fd.message} 개인정보 수집 동의: ${fd.privacyConsent === null ? '미선택' : (fd.privacyConsent ? '예' : '아니오')}`.trim(); }; const sendToOfficenext = async (fd) => { try { const solutionsText = fd.solutions && fd.solutions.length > 0 ? fd.solutions.join(', ') : '미선택'; const consultingsText = fd.consultings && fd.consultings.length > 0 ? fd.consultings.join(', ') : '미선택'; const msg = `[제이시큐어플랫폼 홈페이지 문의 폼 접수]\n\n이름: ${fd.name}\n회사명: ${fd.company}\n부서명: ${fd.department || '미입력'}\n직급: ${fd.position || '미입력'}\n이메일: ${fd.email}\n전화번호: ${fd.phone}\n\n상담희망 솔루션: ${solutionsText}\n상담희망 컨설팅: ${consultingsText}\n\n문의내용: ${fd.message}`; await API.ToolCall('onext_notification_as_gachiai_fixed', { body: { whole: false, to: ['sbtmxk200@jiran.com, ko93102@jiran.com, swjeong@jiran.com'], template: 'text', type: 'static', important: false, items: { header: '제이시큐어플랫폼 문의', contents: msg }, }, }); } catch (e) { console.error('OfficeNEXT 전송 실패:', e); } }; const handleSubmit = async (e) => { e.preventDefault(); if (isLoading || submitStatus === 'success') return; const { name, email, company, phone, message, privacyConsent } = formData; if (!name || !company || !email || !phone || !message) { setSubmitStatus('error'); setStatusMsg('필수 항목을 모두 입력해 주세요.'); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setSubmitStatus('error'); setStatusMsg('유효한 이메일 주소를 입력해 주세요.'); return; } if (!privacyConsent) { setSubmitStatus('error'); setStatusMsg('개인정보 수집 및 이용에 동의해주셔야 문의를 전송할 수 있습니다.'); return; } setIsLoading(true); setSubmitStatus(null); try { const subject = '[제이시큐어플랫폼 홈페이지 문의 폼 접수]'; const body = getEmailBody(formData); const durationMS = formStartTime ? Date.now() - formStartTime : undefined; await API.Site_SendEmailToAdmin(subject, body, durationMS); await sendToOfficenext(formData); setSubmitStatus('success'); setStatusMsg('문의해 주셔서 감사합니다. 빠른 시일 내에 연락드리겠습니다.'); } catch (err) { setSubmitStatus('error'); setStatusMsg(err.message?.includes('HTTP 403') ? '비정상적인 접근이 감지되었습니다.' : '전송 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.'); } finally { setIsLoading(false); } }; const inp = { width: '100%', padding: '7px 10px', border: '1.5px solid #FFD9A8', borderRadius: '8px', fontSize: '13px', color: '#231815', background: '#ffffff', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.15s', }; const lbl = { display: 'block', fontSize: '12px', fontWeight: 600, color: '#FF7F00', marginBottom: '3px' }; const reqStar = { color: '#dc2626', marginLeft: '2px' }; return (

제품 및 서비스 관련 문의를 포함하여 기타 문의는 아래 폼으로 접수해 주시기 바랍니다.
접수해 주신 내용은 담당자가 확인 후 순차적으로 연락드리겠습니다.

{/* 이름 + 회사명 */}

이름 * setFormStartTime(prev => prev || Date.now())} placeholder="이름을 입력해 주세요" style={inp} onFocus={e => { e.target.style.borderColor = '#FF7F00'; setFormStartTime(prev => prev || Date.now()); }} onBlur={e => e.target.style.borderColor = '#FFD9A8'} />

회사명 * e.target.style.borderColor = '#FF7F00'} onBlur={e => e.target.style.borderColor = '#FFD9A8'} />

{/* 부서명 + 직급 */}

부서명 e.target.style.borderColor = '#FF7F00'} onBlur={e => e.target.style.borderColor = '#FFD9A8'} />

직급 e.target.style.borderColor = '#FF7F00'} onBlur={e => e.target.style.borderColor = '#FFD9A8'} />

{/* 이메일 + 전화번호 */}

이메일 주소 * e.target.style.borderColor = '#FF7F00'} onBlur={e => e.target.style.borderColor = '#FFD9A8'} />

전화번호 * e.target.style.borderColor = '#FF7F00'} onBlur={e => e.target.style.borderColor = '#FFD9A8'} />

{/* 상담희망 솔루션 */}

상담희망 솔루션 (중복가능)

{SOLUTION_OPTIONS.map(opt => ( handleCheckboxChange('solutions', opt)} style={{ width: '14px', height: '14px', accentColor: '#FF7F00', cursor: 'pointer' }} /> {opt} ))}

{/* 상담희망 컨설팅 */}

상담희망 컨설팅 (중복가능)

{CONSULTING_OPTIONS.map(opt => ( handleCheckboxChange('consultings', opt)} style={{ width: '14px', height: '14px', accentColor: '#FF7F00', cursor: 'pointer' }} /> {opt} ))}

{/* 문의 내용 */}

문의 내용 *

e.target.style.borderColor = '#FF7F00'}
          onBlur={e => e.target.style.borderColor = '#FFD9A8'} />
      </div>

{/* 개인정보 동의 */}
      <div>
        <label style={lbl}>개인정보 수집 동의 <span style={reqStar}>*</span></label>
        <div style={{ display: 'flex', gap: '16px', marginTop: '4px' }}>
          <label style={{ display: 'flex', alignItems: 'center', gap: '5px', cursor: 'pointer', fontSize: '13px', color: '#231815' }}>
            <input type="radio" name="privacyConsent" checked={formData.privacyConsent === true}
              onChange={() => setFormData(prev => ({ ...prev, privacyConsent: true }))}
              style={{ accentColor: '#FF7F00' }} />
            예
          </label>
          <label style={{ display: 'flex', alignItems: 'center', gap: '5px', cursor: 'pointer', fontSize: '13px', color: '#231815' }}>
            <input type="radio" name="privacyConsent" checked={formData.privacyConsent === false}
              onChange={() => setFormData(prev => ({ ...prev, privacyConsent: false }))}
              style={{ accentColor: '#dc2626' }} />
            아니오
          </label>
        </div>
        {formData.privacyConsent === false && (
          <p style={{ fontSize: '11px', color: '#dc2626', marginTop: '4px', fontWeight: 600 }}>개인정보 수집에 동의하셔야 문의를 전송할 수 있습니다.</p>
        )}
      </div>

{/* 개인정보 처리방침 박스 */}
      <div style={{ background: '#f9fafb', border: '1px solid #e5e7eb', borderRadius: '8px', padding: '10px 12px', fontSize: '11px', color: '#6B6B6B', lineHeight: 1.6 }}>
        <div style={{ fontWeight: 700, color: '#374151', marginBottom: '4px' }}>{PRIVACY_CONFIG.title}</div>
        <p style={{ margin: '0 0 2px 0' }}>{PRIVACY_CONFIG.intro}</p>
        <p style={{ margin: '0 0 2px 0' }}>{PRIVACY_CONFIG.collectionItems}</p>
        <p style={{ margin: '0 0 8px 0' }}>{PRIVACY_CONFIG.collectionMethod}</p>
        <div style={{ fontWeight: 700, color: '#374151', marginBottom: '4px' }}>{PRIVACY_CONFIG.purposeTitle}</div>
        <p style={{ margin: '0 0 2px 0' }}>{PRIVACY_CONFIG.purposeIntro}</p>
        <p style={{ margin: '0 0 8px 0' }}>{PRIVACY_CONFIG.purposeItems}</p>
        <div style={{ fontWeight: 700, color: '#374151', marginBottom: '4px' }}>{PRIVACY_CONFIG.retentionTitle}</div>
        <p style={{ margin: '0 0 8px 0' }}>{PRIVACY_CONFIG.retentionContent}</p>
        <div style={{ fontWeight: 700, color: '#374151', marginBottom: '4px' }}>{PRIVACY_CONFIG.disagreementTitle}</div>
        <p style={{ margin: 0 }}>{PRIVACY_CONFIG.disagreementContent}</p>
      </div>

{/* 에러 메시지 */}
      {submitStatus === 'error' && (
        <div style={{ padding: '8px 10px', borderRadius: '8px', fontSize: '13px', background: '#fef2f2', border: '1px solid #fecaca', color: '#dc2626', display: 'flex', alignItems: 'center', gap: '5px' }}>
          <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
          </svg>
          {statusMsg}
        </div>
      )}

{/* 성공 메시지 */}
      {submitStatus === 'success' && (
        <div style={{ padding: '14px 16px', background: '#f0fdf4', borderRadius: '12px', border: '1px solid #bbf7d0', textAlign: 'center' }}>
          <div style={{ fontSize: '28px', marginBottom: '6px' }}>✅</div>
          <p style={{ fontSize: '13px', fontWeight: 600, color: '#16a34a', whiteSpace: 'pre-line', lineHeight: 1.7 }}>{statusMsg}</p>
        </div>
      )}

{/* 제출 버튼 */}
      <button type="submit" disabled={isLoading}
        style={{
          width: '100%', padding: '9px', borderRadius: '9px', border: 'none',
          background: isLoading ? '#FFB366' : '#FF7F00',
          color: '#ffffff', fontSize: '14px', fontWeight: 700,
          cursor: isLoading ? 'not-allowed' : 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '5px',
          transition: 'background 0.15s',
        }}>
        {isLoading ? (
          <>
            <svg style={{ animation: 'spin 1s linear infinite' }} width="13" height="13" fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" opacity="0.25" />
              <path fill="currentColor" opacity="0.75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
            </svg>
            전송 중...
          </>
        ) : (
          <>
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            문의 보내기
          </>
        )}
      </button>

{/* 폼 전환 링크 */}

</form>
  );
}

// ── 메인 Chat Widget ──────────────────────────────────────────────
export default function ChatWidget() {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [conversationId, setConversationId] = useState(null);
  const [hasUnread, setHasUnread] = useState(false);

const abortRef = useRef(null);
  const messagesContainerRef = useRef(null);
  const inputRef = useRef(null);

const scrollToBottom = () => {
    if (messagesContainerRef.current) {
      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
    }
  };

useEffect(() => {
    if (messages.length > 0) setTimeout(scrollToBottom, 50);
  }, [messages]);

const openContactFormRef = useRef(openContactForm);
  openContactFormRef.current = openContactForm;

useEffect(() => {
    const checkCookie = () => {
      try {
        if (document.cookie.includes('open-gachi-contact=1')) {
          document.cookie = 'open-gachi-contact=;path=/;max-age=0';
          setIsOpen(true);
          setTimeout(() => { openContactFormRef.current(); }, 300);
          return true;
        }
      } catch(e) {}
      return false;
    };
    if (!checkCookie()) {
      const interval = setInterval(() => {
        if (checkCookie()) clearInterval(interval);
      }, 300);
      const timeout = setTimeout(() => clearInterval(interval), 10000);
      return () => { clearInterval(interval); clearTimeout(timeout); };
    }
  }, []);

useEffect(() => {
    const handleOpenContact = (withPlan = false) => {
      setIsOpen(true);
      setTimeout(() => { openContactFormRef.current(withPlan); }, 150);
    };

const handleMessage = (event) => {
      if (event.data && event.data.type === 'open-gachi-contact') handleOpenContact();
      if (event.data && event.data.type === 'open-gachi-contact-with-plan') handleOpenContact(true);
    };
    window.addEventListener('message', handleMessage);

const handleCustom = () => { handleOpenContact(); };
    window.addEventListener('open-gachi-contact', handleCustom);

return () => {
      if (bc) bc.close();
      window.removeEventListener('message', handleMessage);
      window.removeEventListener('open-gachi-contact', handleCustom);
    };
  }, []);

useEffect(() => {
    if (isOpen) {
      setHasUnread(false);
      setTimeout(() => inputRef.current?.focus(), 300);
    }
    const isMobile = window.innerWidth <= 480;
    if (isMobile) {
      if (isOpen) {
        document.body.style.overflow = 'hidden';
        document.body.style.position = 'fixed';
        document.body.style.width = '100%';
      } else {
        document.body.style.overflow = '';
        document.body.style.position = '';
        document.body.style.width = '';
      }
    }
    return () => {
      document.body.style.overflow = '';
      document.body.style.position = '';
      document.body.style.width = '';
    };
  }, [isOpen]);

const stopLoading = () => {
    if (abortRef.current) { abortRef.current.abort(); abortRef.current = null; }
    setLoading(false);
  };

const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
  };

const startNewConversation = () => {
    setMessages([]); setConversationId(null); setError(null);
  };

const SUGGESTED = [
    'MISO 솔루션은 어떤 기능을 제공하나요?',
    'ISMS-P 인증 컨설팅은 어떻게 진행되나요?',
    '도입 비용이 어떻게 되나요?',
    '중소기업도 도입할 수 있나요?',
    '제이시큐어플랫폼 문의하기',
  ];

return (
    <>
      <style>{`
        @media (max-width: 480px) {
          .chat-window {
            bottom: 0 !important; right: 0 !important; left: 0 !important; top: 0 !important;
            width: 100% !important; height: 100dvh !important; border-radius: 0 !important;
          }
          .fab-btn-wrap { bottom: 16px !important; right: 16px !important; }
          .fab-mobile-hide { display: none !important; }
          .close-mobile-btn { display: flex !important; }
        }
        @keyframes fadeSlideUp {
          from { opacity: 0; transform: translateY(16px) scale(0.97); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes pulseRing {
          0%   { box-shadow: 0 0 0 0 rgba(255,127,0,0.35); }
          70%  { box-shadow: 0 0 0 10px rgba(255,127,0,0); }
          100% { box-shadow: 0 0 0 0 rgba(255,127,0,0); }
        }
        @keyframes dotBounce {
          0%, 80%, 100% { transform: translateY(0); }
          40%            { transform: translateY(-6px); }
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes msgIn {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .chat-window { animation: fadeSlideUp 0.25s cubic-bezier(0.16,1,0.3,1) both; }
        .fab-btn { animation: pulseRing 2.5s ease-out infinite; }
        .dot1 { animation: dotBounce 1.2s ease-in-out infinite; animation-delay: 0ms; }
        .dot2 { animation: dotBounce 1.2s ease-in-out infinite; animation-delay: 160ms; }
        .dot3 { animation: dotBounce 1.2s ease-in-out infinite; animation-delay: 320ms; }
        .msg-scroll::-webkit-scrollbar { width: 4px; }
        .msg-scroll::-webkit-scrollbar-track { background: transparent; }
        .msg-scroll::-webkit-scrollbar-thumb { background: #FFD9A8; border-radius: 99px; }
        .chat-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,127,0,0.2); }
        .msg-bubble { animation: msgIn 0.2s ease both; }
      `}</style>

{/* Floating Window */}
      {isOpen && (
        <div className="chat-window" style={{
          position: 'fixed',
          bottom: 'var(--chat-bottom, 96px)', right: 'var(--chat-right, 24px)',
          width: 'min(440px, 100vw)', height: 'min(640px, 100dvh)',
          background: '#ffffff', borderRadius: '20px',
          boxShadow: '0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06)',
          display: 'flex', flexDirection: 'column', overflow: 'hidden',
          zIndex: 9999, border: '1px solid #E8E8E8',
        }}>
          {/* Header */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '12px 16px', background: '#ffffff',
            borderBottom: '1px solid #E8E8E8', flexShrink: 0,
          }}>
            <span style={{ fontSize: '20px', fontWeight: 800, color: '#FF7F00', letterSpacing: '-0.5px' }}>제이시큐어플랫폼</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
              <button onClick={startNewConversation}
                style={{
                  display: 'flex', alignItems: 'center', gap: '5px',
                  padding: '5px 11px', borderRadius: '8px',
                  border: '1.5px solid #E8E8E8', background: '#FAFAFA',
                  color: '#6B6B6B', fontSize: '12px', fontWeight: 600,
                  cursor: 'pointer', transition: 'background 0.15s, border-color 0.15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = '#FFF1E0'; e.currentTarget.style.borderColor = '#FF7F00'; e.currentTarget.style.color = '#FF7F00'; }}
                onMouseLeave={e => { e.currentTarget.style.background = '#FAFAFA'; e.currentTarget.style.borderColor = '#E8E8E8'; e.currentTarget.style.color = '#6B6B6B'; }}
              >
                <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M12 4v16m8-8H4" />
                </svg>
                새로운 채팅
              </button>
              <button className="close-mobile-btn" onClick={() => setIsOpen(false)}
                style={{
                  display: 'none', alignItems: 'center', justifyContent: 'center',
                  width: '32px', height: '32px', borderRadius: '8px',
                  border: '1.5px solid #E8E8E8', background: '#FAFAFA',
                  color: '#6B6B6B', cursor: 'pointer', transition: 'background 0.15s, border-color 0.15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = '#fee2e2'; e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.color = '#ef4444'; }}
                onMouseLeave={e => { e.currentTarget.style.background = '#FAFAFA'; e.currentTarget.style.borderColor = '#E8E8E8'; e.currentTarget.style.color = '#6B6B6B'; }}
              >
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>

{/* Messages */}
          <div ref={messagesContainerRef} className="msg-scroll"
            style={{ flex: 1, overflowY: 'auto', padding: '16px', display: 'flex', flexDirection: 'column', gap: '10px', background: '#FAFAFA' }}>

{/* 추천질문 */}
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', color: '#6B6B6B', textAlign: 'center', paddingBottom: messages.length > 0 ? '4px' : '0', marginBottom: messages.length > 0 ? '4px' : '0' }}>
              {messages.length === 0 && (
                <>
                  <div style={{ width: '52px', height: '52px', background: '#FFF1E0', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="24" height="24" fill="none" stroke="#FF7F00" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                    </svg>
                  </div>
                  <div>
                    <p style={{ fontSize: '15px', fontWeight: 600, color: '#1A1A1A', marginBottom: '4px' }}>무엇이든 물어보세요</p>
                    <p style={{ fontSize: '13px', color: '#6B6B6B' }}>아래에 메시지를 입력해 대화를 시작하세요.</p>
                  </div>
                </>
              )}
              <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', width: '100%' }}>
                {SUGGESTED.map((q, i) => (
                  <button key={i} onClick={() => sendMessageWithText(q)} disabled={loading}
                    style={{
                      width: '100%', padding: '8px 13px', borderRadius: '10px',
                      border: '1.5px solid #E8E8E8', background: '#ffffff',
                      color: '#231815', fontSize: '14px', fontWeight: 500,
                      textAlign: 'left', cursor: loading ? 'not-allowed' : 'pointer',
                      opacity: loading ? 0.5 : 1,
                      transition: 'border-color 0.15s, background 0.15s, color 0.15s',
                      lineHeight: 1.4, display: 'flex', alignItems: 'center', gap: '6px',
                    }}
                    onMouseEnter={e => { if (!loading) { e.currentTarget.style.borderColor = '#FF7F00'; e.currentTarget.style.background = '#FFF1E0'; e.currentTarget.style.color = '#CC6600'; }}}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = '#E8E8E8'; e.currentTarget.style.background = '#ffffff'; e.currentTarget.style.color = '#231815'; }}
                  >
                    {q}
                  </button>
                ))}
              </div>
              {messages.length > 0 && (
                <div style={{ width: '100%', height: '1px', background: '#E8E8E8', margin: '2px 0 6px' }} />
              )}
            </div>

{/* 메시지 목록 */}
            {messages.map((msg, index) => {
              const isContactForm = msg.role === 'assistant' && (msg.content === '__CONTACT_FORM__' || msg.content === '__CONTACT_FORM_WITH_PLAN__');
              const isWithPlan = msg.content === '__CONTACT_FORM_WITH_PLAN__';
              return (
                <div key={index} className="msg-bubble"
                  style={{ display: 'flex', justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start', alignItems: 'flex-end', gap: '7px' }}>

{msg.role === 'assistant' && (
                    <div style={{ width: '26px', height: '26px', background: '#FFF1E0', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <svg width="13" height="13" fill="none" stroke="#FF7F00" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                      </svg>
                    </div>
                  )}

{isContactForm ? (
                    <div style={{
                      maxWidth: '88%', background: '#FFF1E0', border: '1.5px solid #FFD9A8',
                      borderRadius: '16px 16px 16px 4px', padding: '14px',
                      boxShadow: '0 1px 4px rgba(0,0,0,0.07)', width: '100%',
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '10px' }}>
                        <div style={{ width: '22px', height: '22px', background: '#FF7F00', borderRadius: '6px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          <svg width="11" height="11" fill="none" stroke="white" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                          </svg>
                        </div>
                        <span style={{ fontSize: '15px', fontWeight: 800, color: '#FF7F00' }}>{isWithPlan ? '제이시큐어플랫폼 시작 신청하기' : '제이시큐어플랫폼 문의하기'}</span>
                      </div>
                      <InlineContactForm conversationId={conversationId} setConversationId={setConversationId} initialShowPlan={isWithPlan} onSwitchForm={(withPlan) => openContactForm(withPlan)} />
                    </div>
                  ) : (
                    <div style={{
                      maxWidth: '75%', padding: '9px 13px',
                      borderRadius: msg.role === 'user' ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
                      background: msg.role === 'user' ? '#FF7F00' : '#ffffff',
                      color: msg.role === 'user' ? '#ffffff' : '#231815',
                      fontSize: '15px', lineHeight: '1.6',
                      boxShadow: msg.role === 'user' ? 'none' : '0 1px 4px rgba(0,0,0,0.07)',
                      border: msg.role === 'user' ? 'none' : '1px solid #E8E8E8',
                      wordBreak: 'break-word',
                    }}>
                      <md-text>{msg.content}</md-text>
                    </div>
                  )}
                </div>
              );
            })}

{/* 로딩 */}
            {loading && (
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: '7px' }}>
                <div style={{ width: '26px', height: '26px', background: '#FFF1E0', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="13" height="13" fill="none" stroke="#FF7F00" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                  </svg>
                </div>
                <div style={{ background: '#ffffff', border: '1px solid #E8E8E8', borderRadius: '16px 16px 16px 4px', padding: '10px 14px', display: 'flex', gap: '4px', alignItems: 'center', boxShadow: '0 1px 4px rgba(0,0,0,0.07)' }}>
                  <span className="dot1" style={{ width: '6px', height: '6px', background: '#FFD9A8', borderRadius: '50%', display: 'inline-block' }}></span>
                  <span className="dot2" style={{ width: '6px', height: '6px', background: '#FFD9A8', borderRadius: '50%', display: 'inline-block' }}></span>
                  <span className="dot3" style={{ width: '6px', height: '6px', background: '#FFD9A8', borderRadius: '50%', display: 'inline-block' }}></span>
                </div>
              </div>
            )}
          </div>

{/* Error */}
          {error && (
            <div style={{ padding: '8px 16px', background: '#fef2f2', borderTop: '1px solid #fecaca', color: '#dc2626', fontSize: '12px', flexShrink: 0 }}>
              ⚠ {error}
            </div>
          )}

{/* Input */}
          <div style={{ padding: '12px 14px', background: '#ffffff', borderTop: '1px solid #E8E8E8', flexShrink: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', background: '#FAFAFA', border: '1.5px solid #E8E8E8', borderRadius: '12px', padding: '6px 6px 6px 14px', transition: 'border-color 0.15s' }}
              onFocusCapture={e => e.currentTarget.style.borderColor = '#FF7F00'}
              onBlurCapture={e => e.currentTarget.style.borderColor = '#E8E8E8'}>
              <input ref={inputRef} type="text" value={input}
                onChange={e => setInput(e.target.value)} onKeyPress={handleKeyPress}
                placeholder="메시지를 입력하세요..." readOnly={loading} className="chat-input"
                style={{ flex: 1, background: 'transparent', border: 'none', fontSize: '15px', color: '#231815', outline: 'none', boxShadow: 'none' }}
              />
              <button onClick={loading ? stopLoading : sendMessage} disabled={!loading && !input.trim()}
                style={{
                  width: '34px', height: '34px', borderRadius: '8px', border: 'none',
                  background: loading ? '#ef4444' : (!input.trim() ? '#E8E8E8' : '#FF7F00'),
                  color: loading ? '#ffffff' : (!input.trim() ? '#6B6B6B' : '#ffffff'),
                  cursor: !loading && !input.trim() ? 'not-allowed' : 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, transition: 'background 0.15s',
                }}
              >
                {loading ? (
                  <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <rect x="6" y="6" width="12" height="12" rx="2" strokeWidth="2" fill="currentColor" />
                  </svg>
                ) : (
                  <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                  </svg>
                )}
              </button>
            </div>
            {API.user?.email && (
              <p style={{ fontSize: '12px', color: '#6B6B6B', marginTop: '6px', textAlign: 'right' }}>
                {API.user.email}
              </p>
            )}
          </div>
        </div>
      )}

{/* FAB Button */}
      <button
        onClick={() => setIsOpen(prev => !prev)}
        className={`${!isOpen ? 'fab-btn' : ''} ${isOpen ? 'fab-mobile-hide' : ''}`}
        style={{
          position: 'fixed', bottom: '24px', right: '24px',
          width: '56px', height: '56px', borderRadius: '50%',
          background: '#FF7F00', border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 20px rgba(255,127,0,0.4)',
          zIndex: 10000, transition: 'transform 0.2s, background 0.2s',
        }}
        onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.08)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
      >
        {hasUnread && !isOpen && (
          <span style={{ position: 'absolute', top: '4px', right: '4px', width: '10px', height: '10px', background: '#ef4444', borderRadius: '50%', border: '2px solid white' }} />
        )}
        {isOpen ? (
          <svg width="22" height="22" fill="none" stroke="white" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        ) : (
          <svg width="22" height="22" fill="none" stroke="white" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        )}
      </button>
    </>
  );
}
</article></body></html>

IT컴플라이언스 인사이트,최신 보안 트렌드를 전합니다.

IT컴플라이언스 인사이트,
최신 보안 트렌드를 전합니다.