:root { --ml-main: #0073aa; --ml-user: #0073aa; --ml-bg: #ffffff; }
#ml-chat-wrap { width: 100%; max-width: 420px; margin: 40px auto; background: var(--ml-glass-bg); backdrop-filter: var(--ml-blur); border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; height: 620px; overflow: hidden; font-family: inherit; position: relative; border: 1px solid rgba(255, 255, 255, 0.6); background-image: var(--ml-bg-img); background-size: cover; background-position: center; }
.ml-header { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); padding: 15px 20px; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.ml-bot-name { font-weight: 700; font-size: 16px; color: #333; }
.ml-restart { cursor: pointer; font-size: 18px; opacity: 0.5; margin-left:10px; transition:0.3s; }
.ml-restart:hover { color: var(--ml-g1); transform: rotate(180deg); opacity: 1; }
#ml-history { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; padding-bottom: 150px; }
.ml-avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); align-self: flex-end; margin-left: -5px; z-index: 2; }
.ml-row { display: flex; gap: 12px; align-items: flex-end; animation: popIn 0.3s; }
.ml-row.user { justify-content: flex-end; }
.ml-bubble { max-width: 75%; padding: 12px 16px; border-radius: 18px; font-size: 13.5px; position: relative; line-height: 1.5; }
.ml-row.bot .ml-bubble { background: #fff; border-bottom-left-radius: 4px; color: #444; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.ml-row.user .ml-bubble { background: linear-gradient(135deg, var(--ml-g1), var(--ml-g2)); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
#ml-inputs { padding: 15px; background: rgba(255,255,255,0.9); min-height: 80px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; z-index:20; position: relative; border-top: 1px solid rgba(0,0,0,0.05); }
#ml-start, .ml-opt { background: #fff; border: 1px solid #e0e0e0; padding: 10px 18px; border-radius: 50px; cursor: pointer; margin: 4px; font-size: 13px; transition: all 0.2s; color:#555; }
#ml-start:hover, .ml-opt:hover { background: var(--ml-g1); color: #fff; transform: translateY(-3px); border-color: transparent; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
#ml-start { background: linear-gradient(135deg, var(--ml-g1), var(--ml-g2)); color: #fff; border: none; padding: 12px 30px; font-weight: bold; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
.ml-float-btn { background: linear-gradient(135deg, var(--ml-g1), var(--ml-g2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff !important; text-decoration: none !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); transition: 0.3s; position: relative; z-index: 100; }
.ml-float-btn:hover { transform: scale(1.1); filter: brightness(1.1); }
.ml-anim-pulse::before { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); animation: pulse-ring 2s infinite; }
.ml-float-bubble { background: #333; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 11px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); max-width: 150px; text-align: center; animation: fadeIn 0.5s ease-out; margin-bottom: 5px; }
#ml-text-input { outline: none; transition: 0.2s; font-family: inherit; width: 100%; border: 1px solid #ddd; padding: 10px; border-radius: 12px; }
#ml-text-input:focus { border-color: var(--ml-g1); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); }
.ml-wiki-term { cursor: pointer; transition: 0.2s; font-weight: bold; position: relative; z-index: 1; }
.ml-wiki-style-dotted { border-bottom: 2px dashed var(--ml-g1); color: var(--ml-g1); }
.ml-wiki-style-dotted:hover { background: var(--ml-g1); color: #fff; border-color: transparent; border-radius: 4px; padding: 0 4px; }
.ml-wiki-style-highlight { background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); padding: 0 4px; border-radius: 4px; color: #333; }
.ml-wiki-style-bold { color: var(--ml-g1); text-decoration: underline; }
#ml-wiki-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; display: none; justify-content: center; align-items: center; backdrop-filter: blur(8px); }
.ml-theme-light .ml-wiki-card { background: #fff; color: #333; }
.ml-theme-dark #ml-wiki-modal { background: rgba(0,0,0,0.6); }
.ml-theme-dark .ml-wiki-card { background: #222; color: #f0f0f0; border: 1px solid #444; }
.ml-theme-glass .ml-wiki-card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); color: #000; }
.ml-wiki-card { width: 85%; max-width: 320px; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: 25px; position: relative; animation: popIn 0.4s; }
.ml-wiki-close { position: absolute; top: 15px; left: 20px; font-size: 28px; cursor: pointer; opacity: 0.5; }
.ml-wiki-close:hover { opacity: 1; }
#ml-wiki-content h3 { margin: 0 0 15px 0; font-size: 20px; text-align: center; border-bottom: 2px solid rgba(0,0,0,0.05); padding-bottom: 10px; }
.ml-wiki-body { font-size: 14px; line-height: 1.7; text-align: justify; }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.9) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) { #ml-chat-wrap { height: 80vh; width: 95%; margin: 10px auto; border-radius: 20px; } }