@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--font-primary:"Outfit", sans-serif;--bg-main:#0a0a0c;--bg-card:#16161ab3;--bg-input:#1e1e24cc;--primary:#6366f1;--primary-hover:#4f46e5;--accent:#10b981;--text-main:#f8fafc;--text-muted:#94a3b8;--text-thai:#e2e8f0;--border:#ffffff14;--glow:0 0 20px #6366f126;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-pill:9999px;--transition:all .3s cubic-bezier(.4, 0, .2, 1)}body{font-family:var(--font-primary);background-color:var(--bg-main);color:var(--text-main);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15%,#6366f114,#0000 25%),radial-gradient(circle at 85% 30%,#10b9810d,#0000 25%);justify-content:center;min-height:100vh;display:flex}#root{flex-direction:column;width:100%;max-width:600px;height:100vh;padding:0;display:flex}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--glow)}.thai-text{color:var(--text-thai);letter-spacing:.5px;font-size:1.5rem;font-weight:500}.app-container{flex-direction:column;height:100vh;display:flex;position:relative}.content-area{-ms-overflow-style:none;scrollbar-width:none;flex-direction:column;flex:1;gap:24px;padding:24px 16px;display:flex;overflow-y:auto}.content-area::-webkit-scrollbar{display:none}.search-container{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-pill);transition:var(--transition);align-items:center;padding:8px 16px;display:flex}.search-container:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px #6366f133}.search-input{color:var(--text-main);font-size:1rem;font-family:var(--font-primary);background:0 0;border:none;outline:none;flex:1;padding:8px}.search-input::placeholder{color:var(--text-muted)}.search-mode-tags{scrollbar-width:none;flex-wrap:nowrap;justify-content:center;gap:6px;padding-bottom:2px;display:flex;overflow-x:auto}.search-mode-tags::-webkit-scrollbar{display:none}.tag-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-main);border-radius:var(--radius-pill);font-family:var(--font-primary);cursor:pointer;transition:var(--transition);white-space:nowrap;flex:1;justify-content:center;align-items:center;gap:4px;padding:8px 10px;font-size:.85rem;font-weight:500;display:flex}.tag-btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-hover));color:#fff;border:1px solid #0000;font-weight:600;box-shadow:0 4px 12px #6366f14d}.tag-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px #6366f166}.tag-btn-primary:active{transform:scale(.98)}.stop-btn{color:#ef4444;background:#ef44441a;border-color:#ef4444}.tag-btn:hover{border-color:var(--primary);background:#6366f126}.stop-btn:hover{background:#ef444433;border-color:#ef4444}.tag-btn.active-pulse{color:#ef4444;background:#ef444426;border-color:#ef4444;animation:1.5s infinite pulse}.results-list{flex-direction:column;gap:16px;display:flex}.result-card{flex-direction:column;gap:12px;padding:20px;display:flex}.word-header{justify-content:space-between;align-items:flex-start;display:flex}.transcription{color:var(--accent);margin-top:4px;font-size:.95rem;font-weight:500}.meaning{color:var(--text-main);font-size:1.1rem;line-height:1.4}.actions{border-top:1px solid var(--border);gap:12px;margin-top:8px;padding-top:16px;display:flex}.btn{border-radius:var(--radius-sm);font-family:var(--font-primary);cursor:pointer;transition:var(--transition);border:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:10px;font-size:.9rem;font-weight:600;display:flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:active{background:var(--primary-hover);transform:scale(.98)}.btn-secondary{color:var(--text-main);border:1px solid var(--border);background:#ffffff0d}.btn-secondary:active{background:#ffffff1a}@keyframes pulse{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}.loading-spinner{text-align:center;color:var(--primary);padding:24px}.bottom-panel-container{width:100%;padding:0 16px 24px}.bottom-panel{border-radius:var(--radius-lg);box-shadow:0 -10px 40px #0006, var(--glow);-webkit-backdrop-filter:blur(20px);background:#101014d9;border:1px solid #ffffff1a;flex-direction:column;gap:16px;padding:16px;display:flex}.bottom-search-tools{flex-direction:column;gap:12px;display:flex}.search-container.inside-bottom{margin:0;padding:10px 20px}.bottom-nav{border-top:1px solid #ffffff0d;justify-content:space-around;align-items:center;gap:8px;padding-top:8px;display:flex}.nav-item{color:var(--text-muted);font-family:var(--font-primary);cursor:pointer;transition:var(--transition);border-radius:var(--radius-md);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:8px;font-size:.85rem;font-weight:500;display:flex}.nav-item.active{color:var(--primary)}.nav-item:hover{background:#ffffff0d}.nav-item svg{transition:var(--transition);margin-bottom:2px}.nav-item.active svg{filter:drop-shadow(0 0 8px #6366f180);transform:translateY(-2px)}.badge{background:var(--primary);color:#fff;border-radius:var(--radius-pill);margin-left:4px;padding:2px 6px;font-size:.65rem;font-weight:700}.folders-container{gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.folders-container::-webkit-scrollbar{height:4px}.folders-container::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.folder-btn{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-main);border-radius:var(--radius-sm);white-space:nowrap;cursor:pointer;transition:var(--transition);padding:6px 12px;font-size:.9rem}.folder-btn.active{border-color:var(--primary);color:var(--primary);background:#6366f133}.add-folder-btn{color:var(--text-muted);border-style:dashed}.add-folder-input{border:1px solid var(--primary);border-radius:var(--radius-sm);display:flex;overflow:hidden}.add-folder-input input{color:var(--text-main);background:0 0;border:none;outline:none;width:100px;padding:4px 8px}.add-folder-input button{background:var(--primary);color:#fff;cursor:pointer;border:none;padding:0 8px}.dictionary-item{flex-direction:column;gap:6px;padding:10px 14px;display:flex}.dict-main-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.dict-text-block{flex-direction:column;flex:1;min-width:0;display:flex}.dict-inline-words{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.thai-text-small{color:var(--text-thai);font-size:1.25rem;font-weight:500;line-height:1.2}.transcription-small{color:var(--accent);font-size:.85rem;line-height:1.2}.meaning-small{color:var(--text-main);word-wrap:break-word;margin-top:4px;font-size:.95rem;line-height:1.2}.dict-actions-block{gap:2px;display:flex}.action-icon-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;display:flex}.action-icon-btn:hover{color:var(--text-main);background:#ffffff0d}.remove-btn{color:#ef4444}.remove-btn:hover{background:#ef44441a}.word-note-small{color:var(--text-muted);border-radius:var(--radius-sm);border-left:2px solid var(--accent);background:#0003;padding:6px 10px;font-size:.85rem}.note-edit-container{flex-direction:column;gap:8px;margin-top:4px;display:flex}.note-textarea-small{background:var(--bg-input);border:1px solid var(--border);color:var(--text-main);border-radius:var(--radius-sm);font-family:var(--font-primary);resize:vertical;outline:none;min-height:48px;padding:8px;font-size:.85rem}.note-textarea-small:focus{border-color:var(--primary)}.note-edit-actions{justify-content:flex-end;gap:8px;display:flex}.btn-sm{padding:6px 12px;font-size:.8rem}.modal-overlay{-webkit-backdrop-filter:blur(4px);z-index:999;background:#0009;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-content{flex-direction:column;gap:16px;width:100%;max-width:400px;padding:24px;display:flex}.modal-content h3{margin-bottom:-8px;font-size:1.25rem}.modal-word{color:var(--primary);border-bottom:1px solid var(--border);padding-bottom:8px;font-size:1.5rem;font-weight:600}.modal-folders-list{flex-direction:column;gap:8px;max-height:50vh;display:flex;overflow-y:auto}.folder-checkbox{cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);background:#ffffff0d;align-items:center;gap:12px;padding:8px;font-size:1.05rem;display:flex}.folder-checkbox:hover{background:#ffffff1a}.folder-checkbox input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--primary)}.history-title{color:var(--text-muted);text-align:center;margin-top:16px;margin-bottom:8px;font-size:1rem}.history-list{flex-direction:column;gap:8px;display:flex}.history-item{cursor:pointer;transition:var(--transition);flex-direction:column;gap:6px;padding:12px;display:flex}.history-item:hover{border-color:var(--primary);background:#ffffff14}.history-query-meta{justify-content:space-between;align-items:center;display:flex}.history-query{color:var(--text-main);font-size:1.05rem;font-weight:500}.history-meta{color:var(--text-muted);font-size:.8rem}.history-preview{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;overflow:hidden}.settings-container{flex-direction:column;padding:16px;display:flex}.setting-group{flex-direction:column;display:flex}:root{--bg-dark:#09090b;--bg-panel:#18181bb3;--border-color:#ffffff1a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-color:#3b82f6;--accent-hover:#2563eb;--accent-glow:#3b82f666;--danger-color:#ef4444;--danger-glow:#ef444466;--glass-blur:blur(12px);--radius-lg:16px;--radius-md:12px;--radius-sm:8px;--shadow-glow:0 0 20px var(--accent-glow);--shadow-danger:0 0 20px var(--danger-glow)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow:hidden}.app-container{width:100vw;height:100dvh;display:flex;position:relative}.glass-panel{background:var(--bg-panel);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color)}.sidebar{border-right:1px solid var(--border-color);z-index:40;flex-direction:column;width:280px;height:100%;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex}@media (width<=768px){.sidebar{position:absolute;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}}.sidebar-header{border-bottom:1px solid var(--border-color);padding:20px}.sidebar-content{flex:1;padding:10px;overflow-y:auto}.main-content{flex-direction:column;flex:1;height:100%;display:flex;position:relative}.top-nav{border-bottom:1px solid var(--border-color);height:60px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);z-index:10;background:#09090bcc;align-items:center;padding:0 20px;display:flex}.chat-scroll-area{flex-direction:column;flex:1;gap:24px;padding:20px;display:flex;overflow-y:auto}.message{flex-direction:column;gap:8px;max-width:85%;display:flex}.message.self{align-self:flex-end}.message.bot{align-self:flex-start}.bubble{border-radius:var(--radius-lg);word-break:break-word;white-space:pre-wrap;padding:16px;font-size:16px;line-height:1.5;box-shadow:0 4px 6px -1px #0000001a}.bubble.self{background:#2b2b30cc;border-bottom-right-radius:4px}.bubble.bot{background:var(--bg-panel);border:1px solid var(--border-color);border-bottom-left-radius:4px}.translation-large{color:#fff;word-break:break-word;margin-bottom:8px;font-size:24px;font-weight:500}.source-small{color:var(--text-secondary);font-size:14px}.nuance-block{border-top:1px solid var(--border-color);color:#a1a1aa;margin-top:12px;padding-top:12px;font-size:14px}.markdown-body p:first-child{margin-top:0}.markdown-body p:last-child{margin-bottom:0}.markdown-body strong,.markdown-body b{color:#fff;font-weight:600}.markdown-body ul,.markdown-body ol{margin-top:8px;margin-bottom:8px;margin-left:20px}.markdown-body p{margin-top:8px;margin-bottom:8px}.controls-area{border-top:1px solid var(--border-color);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#09090be6;flex-direction:column;gap:16px;padding:20px;display:flex}.direction-buttons{grid-template-columns:1fr 1fr;gap:12px;display:grid}button{cursor:pointer;border-radius:var(--radius-md);background:var(--bg-panel);color:var(--text-primary);border:none;border:1px solid var(--border-color);justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:16px;font-weight:500;transition:all .2s;display:flex}button:hover{background:#ffffff1a}button:active{transform:scale(.98)}button.primary{background:var(--accent-color);border-color:var(--accent-color)}button.primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-glow)}button.listening{background:var(--danger-color);border-color:var(--danger-color);animation:2s infinite pulse-glow}@keyframes pulse-glow{0%{box-shadow:0 0 0 0 var(--danger-glow)}70%{box-shadow:0 0 0 15px #ef444400}to{box-shadow:0 0 #ef444400}}textarea,input{border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);resize:vertical;background:#0003;width:100%;padding:12px;font-family:inherit;font-size:16px}textarea:focus,input:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-glow);outline:none}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}