#aiModeBtn { position:fixed; right:18px; bottom:120px; z-index:1100; display:flex; align-items:center; gap:9px; padding:11px 18px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; color:#334155; font-size:14px; font-weight:600; box-shadow:0 6px 24px #0f172a1a; transition:transform .2s,box-shadow .2s; }
#aiModeBtn:hover { transform:translateY(-2px); box-shadow:0 10px 28px #0f172a26; }
#aiModeBtn i { color:var(--jdih-green, #1D7816); }
#aiBox { position:fixed; right:20px; bottom:178px; z-index:1101; display:none; flex-direction:column; width:400px; height:550px; max-height:calc(100dvh - 200px); overflow:hidden; border:1px solid #e2e8f0; border-radius:22px; background:#f6f9f4; box-shadow:0 24px 70px #0f172a33; color:#334155; animation:chat-appear .2s ease; }
#aiBox .ai-header { display:flex; align-items:center; gap:12px; padding:20px; background:linear-gradient(125deg,#155f16,var(--jdih-green, #1D7816) 65%,#2d8a25); color:#fff; }
#aiBox .ai-avatar { display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border:1px solid #ffffff40; border-radius:14px; background:#ffffff1a; font-size:21px; }
#aiBox .ai-heading { flex:1; }
#aiBox .ai-heading strong { display:block; font-size:15px; letter-spacing:.1px; }
#aiBox .ai-heading small { display:block; margin-top:3px; color:#dcefd8; font-size:12px; }
#aiBox .ai-close { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:9px; background:#ffffff14; color:#fff; font-size:20px; }
#aiBox .ai-close:hover { background:#ffffff30; }
#aiBody { flex:1; min-height:0; padding:20px 16px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; font-size:13px; }
#aiBox .msg { margin-bottom:16px; line-height:1.65; overflow-wrap:anywhere; animation:chat-appear .2s ease; }
#aiBox .msg > span { display:inline-block; max-width:95%; padding:11px 14px; white-space:pre-wrap; }
#aiBox .msg.user { text-align:right; }
#aiBox .msg.user > span { border-radius:16px 16px 4px 16px; background:var(--jdih-green, #1D7816); color:#fff; }
#aiBox .msg.bot > span { border:1px solid #e8ecf3; border-radius:16px 16px 16px 4px; background:#fff; color:#475569; }
#aiBox .chat-welcome { padding:19px; border:1px solid #e1ebdd; border-radius:17px; background:#fff; box-shadow:0 3px 12px #155f1605; }
#aiBox .chat-welcome .welcome-eyebrow { display:block; margin-bottom:9px; color:#2d8a25; font-size:10px; font-weight:700; letter-spacing:1.5px; }
#aiBox .chat-welcome .welcome-title { display:block; margin-bottom:8px; color:#1e293b; font-size:19px; line-height:1.4; }
#aiBox .chat-welcome p { margin:0 0 12px; }
#aiBox .welcome-hint { display:block; color:#94a3b8; font-size:11px; }
#aiBox .doc { margin-top:9px; padding:13px 14px; border:1px solid #e5e9f2; border-radius:13px; background:#fff; text-align:left; }
#aiBox .doc strong { display:block; color:#1e293b; font-size:13px; line-height:1.55; }
#aiBox .doc div { margin:6px 0 9px; color:#64748b; font-size:11px; }
#aiBox .doc a { display:inline-block; color:var(--jdih-green, #1D7816); font-size:12px; font-weight:600; text-decoration:none; }
#aiBox .doc a:hover { text-decoration:underline; }
#aiBox .ai-compose { padding:12px 14px 10px; border-top:1px solid #e8ecf3; background:#fff; }
#aiBox .ai-input { display:flex; align-items:center; gap:8px; padding:5px; border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc; }
#aiBox .ai-input:focus-within { border-color:#8cc06d; box-shadow:0 0 0 3px #1d781610; }
#aiBox .ai-input input { flex:1; min-width:0; padding:9px 8px; border:0; outline:0; background:transparent; color:#334155; font-size:13px; }
#aiBox .ai-input input::placeholder { color:#94a3b8; }
#aiBox .ai-input button { display:grid; place-items:center; flex-shrink:0; width:37px; height:37px; border:0; border-radius:10px; background:var(--jdih-green, #1D7816); color:#fff; }
#aiBox .ai-input button:disabled { opacity:.45; cursor:wait; }
#aiBox .ai-compose > small { display:block; margin-top:8px; color:#94a3b8; text-align:center; font-size:10px; }
#aiBox button:focus-visible, #aiModeBtn:focus-visible { outline:3px solid #8cc06d; outline-offset:3px; }
@keyframes chat-appear { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:480px) { #aiBox { right:12px; bottom:178px; width:calc(100vw - 24px); max-height:calc(100dvh - 195px); border-radius:18px; } #aiBox .ai-header { padding:16px; } #aiBody { padding:14px 12px; } }
@media (prefers-reduced-motion:reduce) { #aiBox, #aiBox .msg { animation:none; } #aiModeBtn { transition:none; } }