/* [TAMBAHAN] CSS untuk Generator Box */
#floating-generator-container { font-family: 'Poppins', sans-serif; }
.control-label { font-size: 0.8rem; font-weight: 500; color: #a0a0b0; }
.custom-select, .control-input { background-color: #2a2a33; border: 1px solid #3a3a4a; }
.toggle-bg:after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; background-color: white; border: 1px solid #d1d5db; border-radius: 9999px; height: 1rem; width: 1rem; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
input:checked + .toggle-bg:after { transform: translateX(100%); border-color: white; }
input:checked + .toggle-bg { background-color: #a855f7; }
.scrollbar::-webkit-scrollbar { width: 8px; }
.scrollbar::-webkit-scrollbar-track { background: #1a1a1f; }
.scrollbar::-webkit-scrollbar-thumb { background: #3a3a4a; border-radius: 4px; }
.scrollbar::-webkit-scrollbar-thumb:hover { background: #4a4a5a; }
.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #4a4a5a; border-radius: 20px; }
.control-icon-btn { width: 2rem; height: 2rem; border-radius: 0.5rem; background-color: #3f3f46; color: #a1a1aa; transition: background-color 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.control-icon-btn:hover { background-color: #52525b; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
.animate-shake { animation: shake 0.5s ease-in-out; }
@keyframes breathing-glow { 0% { box-shadow: 0 0 15px rgba(192, 132, 252, 0.15); } 50% { box-shadow: 0 0 35px rgba(192, 132, 252, 0.3); } 100% { box-shadow: 0 0 15px rgba(192, 132, 252, 0.15); } }
#prompt-container { display: flex; flex-direction: column; width: 100%; max-width: 48rem; background-color: #27272a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 1rem; transition: all 0.3s ease-in-out; animation: breathing-glow 3s ease-in-out infinite; }
#prompt-container:focus-within { border-color: rgba(192, 132, 252, 0.8); }
#prompt-input { width: 100%; background: transparent; border: none; resize: none; color: #e5e7eb; font-size: 1rem; line-height: 1.75; padding: 0.5rem 0; min-height: 50px; outline: none; }
#prompt-input::placeholder { color: #a1a1aa; }
#prompt-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.generate-btn-sub { display: flex; align-items: center; gap: 0.25rem; opacity: 0.8; }
#generate-btn { padding: 0.6rem 1.25rem; font-weight: 600; font-size: 0.875rem; border-radius: 0.5rem; background-image: linear-gradient(to right, #d946ef, #fb923c); display: flex; align-items: center; gap: 0.5rem; transition: opacity 0.2s; }
#generate-btn:hover { opacity: 0.9; }
#settings-panel { display: none; padding-top: 1rem; border-top: 1px solid #3f3f46; margin-top: 1rem; }
