/* style_components.css - Modals, Toasts, Animations, and Floating Elements */
/* [Updated: Full-screen Background Avatar & Smart Positioning] */

/* --- MODALS --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-overlay.visible { display: flex; }
.modal-content { background-color: rgba(22, 27, 34, 0.9); border: 1px solid var(--border-color); padding: 24px; border-radius: var(--radius); width: 90%; max-width: 1000px; box-shadow: var(--shadow); }
#modal-form { display: flex; flex-direction: column; gap: 8px; }
#modal-form label { margin-top: 8px; font-weight: 500; color: var(--text-secondary); font-size: 14px; }
#modal-form input, #modal-form textarea, #modal-form select { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 14px; font-family: 'Sarabun', sans-serif; background-color: #0d1117; color: var(--text-primary); }
#modal-form input:focus, #modal-form textarea:focus, #modal-form select:focus { outline: none; border-color: var(--primary-accent); }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 24px; gap: 12px; }
.modal-actions .icon-btn.primary { color: var(--primary-accent); }
.modal-actions .icon-btn.primary:hover { background-color: var(--primary-accent); color: var(--input-bg); }

.category-modal-content { background-color: #0d1117; border: 1px solid #30363d; width: 90%; max-width: 960px; height: 85vh; display: flex; flex-direction: column; padding: 24px; border-radius: 16px; box-shadow: 0 15px 50px rgba(0,0,0,0.5); }
.category-modal-content h3 { margin-top: 0; margin-bottom: 0; padding-bottom: 16px; border-bottom: 1px solid #30363d; color: var(--text-primary); font-size: 20px; flex-shrink: 0; }
.category-modal-body { flex-grow: 1; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 4px 8px 16px 4px; }
.modal-nav-header { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; flex-shrink: 0; }
.nav-back-btn { background: rgba(255,255,255,0.05); border: 1px solid transparent; color: var(--text-primary); cursor: pointer; width: 40px; height: 40px; border-radius: 50%; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.nav-back-btn:hover { background-color: var(--input-bg); border-color: var(--text-secondary); transform: translateX(-2px); }
.nav-title { font-size: 20px; font-weight: 700; color: var(--primary-accent); }

/* --- TOAST NOTIFICATIONS --- */
.toast-container { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 30px; background-color: var(--input-bg); color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.5); font-size: 14px; font-weight: 500; pointer-events: auto; opacity: 0; transform: translateY(-50px) scale(0.9); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.success { border-left: 4px solid var(--success-color); }
.toast.error { border-left: 4px solid var(--danger-color); }
.toast.info { border-left: 4px solid var(--primary-accent); }
.loader-container { text-align: center; padding: 20px; color: var(--text-secondary); font-size: 14px; display: none; }
.loader-container.active { display: block; }
.fa-spin { animation: spin 1.5s linear infinite; }

/* --- GLOW ANIMATION --- */
@keyframes move-infinite { 0% { transform: translate(var(--x-start), var(--y-start)) rotate(0deg); } 25% { transform: translate(var(--x1), var(--y1)) rotate(90deg); } 50% { transform: translate(var(--x2), var(--y2)) rotate(180deg); } 75% { transform: translate(var(--x3), var(--y3)) rotate(270deg); } 100% { transform: translate(var(--x-start), var(--y-start)) rotate(360deg); } }
.glow-container { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; z-index: 0; } /* ย้ายไปอยู่ล่างสุด */
body.animate-on:not(.performance-mode) .glow-container { display: block; }
.glow-ball { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.4; animation-name: move-infinite; animation-timing-function: linear; animation-iteration-count: infinite; transition: animation-duration 2s ease-in-out; will-change: transform; }
.glow-container.speaking .glow-ball { animation-duration: calc(var(--duration) / 4) !important; }
#glow1 { width: 64vmax; height: 64vmax; background: #59e6cd; --x-start: -20vw; --y-start: -20vh; --x1: 40vw; --y1: 10vh; --x2: 50vw; --y2: 70vh; --x3: -10vw; --y3: 80vh; --duration: 60s; animation-duration: var(--duration); }
#glow2 { width: 48vmax; height: 48vmax; background: #cae79d; --x-start: 100vw; --y-start: 10vh; --x1: 70vw; --y1: 80vh; --x2: 20vw; --y2: 90vh; --x3: 10vw; --y3: 20vh; --duration: 70s; animation-duration: var(--duration); }
#glow3 { width: 56vmax; height: 56vmax; background: #ffdc8a; --x-start: 50vw; --y-start: -30vh; --x1: 80vw; --y1: 40vh; --x2: 20vw; --y2: 110vh; --x3: 10vw; --y3: 50vh; --duration: 80s; animation-duration: var(--duration); }

/* --- POPUPS & DISPLAYS --- */
.image-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); z-index: 5; width: auto; max-width: 90%; max-height: 70%; background-color: rgba(22, 27, 34, 0.8); backdrop-filter: blur(10px); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.image-popup.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#popup-img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: calc(var(--radius) - 4px); display: block; }

.datetime-display { position: absolute; top: 55px; right: 24px; z-index: 5; color: #ffffff; text-align: right; text-shadow: 0 1px 3px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 12px; }
.time-display { font-size: 3rem; font-weight: 500; }
.date-display { font-size: 1.2rem; font-weight: 300; text-transform: uppercase; letter-spacing: 1px; }
.status-icon { font-size: 1.5rem; color: #ffffff; transition: color 0.3s ease; }
.status-icon.disabled { color: var(--text-secondary); }

/* STATUS DISPLAY (Big Icon Center) */
.status-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-size: 50vmin; color: #ffffff; pointer-events: none; transition: opacity 0.5s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.status-display .material-symbols-outlined { font-size: 1em; vertical-align: middle; will-change: transform; line-height: 1; }
.status-text { font-size: 0.05em; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; opacity: 0; transition: opacity 0.3s ease; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.status-display.idle { opacity: 0.05; }
.status-display.listening, .status-display.thinking, .status-display.speaking { opacity: 0.8; }
.status-display.listening .status-text, .status-display.thinking .status-text, .status-display.speaking .status-text { opacity: 1; }

.status-display.idle .material-symbols-outlined { animation: float-subtle 10s infinite ease-in-out alternate; }
.status-display.thinking .material-symbols-outlined { animation: spin 1.5s infinite linear; }
.status-display.speaking .material-symbols-outlined { animation: pulse-wave 2s infinite ease-out; }
.status-display.listening .material-symbols-outlined { animation: pulse-eq 1s infinite ease-in-out; }

@keyframes float-subtle { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse-wave { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.8; } }
@keyframes pulse-eq { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.8); } 100% { transform: scaleY(1); } }

/* 🌟 [UPDATED] ROBOT FACE POPUP (หน้าต่าง AI แบบฝังเต็มจอ - Background Layer) */
.robot-face-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;       /* ขยายเต็มความกว้าง */
    height: 100%;      /* ขยายเต็มความสูง */
    max-width: none;   
    background: transparent;
    
    /* ตั้งค่า Z-index ให้อยู่ล่างสุด (แต่เหนือพื้นหลัง Glow) */
    z-index: 1;        
    
    opacity: 0;
    pointer-events: none; /* เริ่มต้นให้คลิกทะลุได้ */
    transition: opacity 0.5s ease-in-out; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.robot-face-wrapper.active {
    opacity: 1;
    pointer-events: auto; /* รับการคลิกได้เมื่อเปิด */
    transform: none;      
}

#robot-face-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    /* ปรับตำแหน่งดวงตาให้ขยับขึ้นบนนิดหน่อย เพื่อไม่ให้บังช่องแชทด้านล่าง */
    transform: translateY(-5%); 
}

/* เมื่อหน้าตา AI เปิดอยู่ ให้ซ่อน Status Icon ตรงกลาง */
body.face-active .status-display {
    display: none !important;
}

/* --- YOUTUBE POPUP --- */
.youtube-popup-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 20; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
.youtube-popup-overlay.show { display: flex; opacity: 1; }
.youtube-content { background-color: transparent !important; border: none !important; box-shadow: none !important; width: 80% !important; max-width: none !important; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); display: flex; flex-direction: column; }
.youtube-popup-overlay.show .youtube-content { transform: scale(1); }
.youtube-header { display: none !important; }
.youtube-player-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; background-color: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
.youtube-player-wrapper iframe, .youtube-player-wrapper #youtube-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* --- AI VISION CENTER (Camera Layouts) --- */
#video-container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: #000; 
}

#webcam-video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 16px; 
    transform: scaleX(-1); 
}

#ai-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    border-radius: 16px; 
    transform: scaleX(-1); 
    object-fit: cover;
    image-rendering: pixelated; 
}

/* --- MINI CAM (Dynamic Positioning) --- */
.mini-cam-wrapper { 
    position: absolute; 
    top: 130px; 
    right: 24px; 
    width: 280px; 
    aspect-ratio: 4/3; 
    background-color: #000; 
    border-radius: 16px; 
    overflow: hidden; 
    z-index: 15; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.6); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0; 
    pointer-events: none; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    transform: translateY(-20px) scale(0.9); 
}

.mini-cam-wrapper.active { 
    opacity: 1; 
    pointer-events: auto; 
    transform: translateY(0) scale(1); 
}

/* 🌟 เมื่อหน้าตา AI เปิด (body.face-active) ให้เลื่อนกล้องหลบลงไปด้านล่างขวา */
body.face-active .mini-cam-wrapper.active {
    top: auto;
    bottom: 24px;
    right: 24px;
    width: 220px; /* ลดขนาดลงอีกนิดเพื่อไม่ให้บังหน้าจอเยอะ */
    transform: translateY(0) scale(1); 
}

/* 🌟 เมื่อกล้องเลื่อนลงล่าง ปุ่มไมค์ลอยต้องหลบขึ้นบน (กันทับกัน) */
body.face-active .sidebar-mic-btn {
    bottom: 190px !important;
}

.mini-cam-wrapper video, .mini-cam-wrapper canvas { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover;
}

/* --- USER GREETING DISPLAY --- */
.user-greeting-display { position: absolute; top: 15px; right: 24px; z-index: 6; font-size: 13px; color: var(--primary-accent); background-color: rgba(22, 27, 34, 0.9); padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(88, 166, 255, 0.4); cursor: pointer; transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); opacity: 0; transform: translateY(-20px); pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 6px; }
.user-greeting-display.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.user-greeting-display:hover { background-color: rgba(88, 166, 255, 0.25); border-color: var(--primary-accent); box-shadow: 0 4px 15px rgba(88, 166, 255, 0.3); transform: translateY(2px); }

/* --- GLOBAL FLOATING MIC --- */
.sidebar-mic-btn { position: absolute; bottom: 20px; right: 20px; left: auto; transform: scale(0); width: 60px; height: 60px; border-radius: 50%; background: rgba(31, 37, 46, 0.8); border: 2px solid var(--primary-accent); color: var(--primary-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 30px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; backdrop-filter: blur(5px); }
.sidebar-mic-btn.visible { transform: scale(1); opacity: 1; pointer-events: auto; }
.sidebar-mic-btn .material-symbols-outlined { font-size: 28px; }
.sidebar-mic-btn:hover { background: var(--primary-accent); color: white; box-shadow: 0 0 25px rgba(88, 166, 255, 0.8); transform: scale(1.1); }
.sidebar-mic-btn.listening { background-color: var(--danger-color) !important; border-color: #ff7b72 !important; color: white !important; animation: pulse-red 1.5s infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(248, 81, 73, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0); } }
.mic-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 15px var(--primary-accent); opacity: 0; animation: pulse-glow 2s infinite; }
.sidebar-mic-btn:hover .mic-glow { opacity: 0.5; }
@keyframes pulse-glow { 0% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1); opacity: 0.3; } }

/* --- RESPONSIVE --- */
@media (max-width: 1200px) { .recommend-card { flex: 0 0 calc(25% - 12px); } }
@media (max-width: 900px) { .recommend-card { flex: 0 0 calc(33.33% - 11px); } }
@media (max-width: 600px) { .recommend-card { flex: 0 0 calc(50% - 8px); } }