/* style_components.css - Modals, Toasts, Animations, Floating Elements, and Bento Design System */

/* =========================================================
   1. MODALS & FORMS
   ========================================================= */
.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); }

/* =========================================================
   2. TOAST NOTIFICATIONS & LOADERS
   ========================================================= */
.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; }

/* =========================================================
   3. BACKGROUND 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); }

/* =========================================================
   4. POPUPS, DISPLAYS & HUD
   ========================================================= */
.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); } }

/* ROBOT FACE POPUP (Background Layer) */
.robot-face-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; background: transparent;
    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%); }

body.face-active .status-display { display: none !important; }

/* =========================================================
   5. YOUTUBE & CAMERA
   ========================================================= */
.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; }

/* 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); }
body.face-active .mini-cam-wrapper.active { top: auto; bottom: 24px; right: 24px; width: 220px; transform: translateY(0) scale(1); }
body.face-active .global-voice-wrapper { bottom: 190px !important; } 
.mini-cam-wrapper video, .mini-cam-wrapper canvas { width: 100% !important; height: 100% !important; object-fit: cover; }

/* =========================================================
   6. 🌟 ASSISTIVE TOUCH MIC (Fixed & Snap Edition)
   ========================================================= */

/* กล่องห่อหุ้มทั้งหมด (ลอยอิสระ) */
.global-voice-wrapper {
    position: fixed;
    right: 20px;
    top: 50%; 
    transform: translateY(-50%); /* กึ่งกลางแนวตั้งเป๊ะๆ */
    display: none; /* 🌟 ซ่อนไว้ก่อนในตอนแรก */
    align-items: center;
    gap: 12px;
    z-index: 10000;
    user-select: none;
    pointer-events: none;
}
/* แถบข้อความ STT */
.stt-slide-card {
    background: rgba(33, 38, 45, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 18px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 13px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 250px;
    overflow: hidden;
}

/* ปรับทิศทางการสไลด์ตามฝั่งที่ปุ่มอยู่ */
.global-voice-wrapper.side-right .stt-slide-card { transform: translateX(20px) scale(0.8); }
.global-voice-wrapper.side-left .stt-slide-card { transform: translateX(-20px) scale(0.8); }

.global-voice-wrapper.listening .stt-slide-card {
    opacity: 1;
    transform: translateX(0) scale(1) !important;
}

/* 🎛️ ปุ่มไมค์สไตล์ AssistiveTouch */
.sidebar-mic-btn {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: rgba(40, 40, 40, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: grab;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    position: relative;
    flex-shrink: 0;
    opacity: 0.6;
    pointer-events: auto; 
    transition: opacity 0.3s, transform 0.2s, background 0.3s;
}

.sidebar-mic-btn::before {
    content: ''; position: absolute;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.sidebar-mic-btn .material-symbols-outlined { font-size: 22px; color: #fff; z-index: 2; }
.sidebar-mic-btn:hover, .global-voice-wrapper.dragging .sidebar-mic-btn { opacity: 1; background: rgba(50, 50, 50, 0.8); }
.sidebar-mic-btn:active { cursor: grabbing; transform: scale(0.9); }

/* สถานะฟังเสียง */
.global-voice-wrapper.listening .sidebar-mic-btn {
    opacity: 1; background: rgba(30, 30, 30, 0.9); border-color: rgba(88, 166, 255, 0.4);
}
.global-voice-wrapper.listening .sidebar-mic-btn::before {
    background: rgba(248, 81, 73, 0.9); border-color: #ff7b72;
    animation: pulse-assistive 1.2s infinite;
}
@keyframes pulse-assistive { 0% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.6); } 70% { box-shadow: 0 0 0 15px rgba(248, 81, 73, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0); } }

/* =========================================================
   7. 🍱 BENTO DESIGN SYSTEM (Minimal & Compact Edition)
   ========================================================= */

#status-view {
    overflow-y: auto !important; 
    padding-bottom: 20px;
    align-content: flex-start; 
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: max-content; 
    gap: 16px; 
    width: 100%;
}

.bento-card {
    background-color: rgba(22, 27, 34, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 20px; 
    padding: 16px; 
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.bento-card:hover { 
    transform: translateY(-2px); 
    background-color: rgba(33, 38, 45, 0.9); 
}

.span-2-col { grid-column: span 2; }
.span-3-col { grid-column: span 3; }

.bento-header { 
    display: flex; align-items: center; gap: 8px; 
    margin-bottom: 12px; font-size: 14px; font-weight: 700; color: #ffffff; 
    z-index: 2; flex-shrink: 0;
}
.bento-header .material-symbols-outlined { 
    font-size: 20px; color: var(--text-secondary); 
}

.bento-content { 
    display: flex; flex-direction: column; gap: 8px; 
    flex-grow: 1; z-index: 2; 
    justify-content: flex-start; 
}

.bento-setting-row { 
    display: flex; justify-content: space-between; align-items: center; 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 10px 14px; 
    border-radius: 12px; 
    font-size: 13px; color: var(--text-primary);
}

.bento-select { 
    background: rgba(0, 0, 0, 0.3); color: white; border: 1px solid rgba(255,255,255,0.05); 
    padding: 8px 12px; border-radius: 8px; font-family: 'Sarabun', sans-serif; 
    width: 100%; font-size: 12px; font-family: monospace;
}
.bento-select:focus { border-color: var(--primary-accent); outline: none; }

.bento-bg-icon { position: absolute; right: -15px; bottom: -15px; font-size: 100px !important; opacity: 0.02; z-index: 1; transform: rotate(-15deg); pointer-events: none; }

/* 🟦 สีฟ้า (Primary Accent) */
.bento-grid input:checked + .slider { background-color: var(--primary-accent) !important; }

/* กล่อง Admin */
.admin-card { background-color: rgba(33, 38, 45, 0.4); border: 1px dashed rgba(255,255,255,0.05); }
.admin-card .admin-btn { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary); border-radius: 10px; font-size: 14px;}
.admin-card .admin-btn:hover:not(.disabled) { background-color: var(--primary-accent); color: #fff; border-color: var(--primary-accent); }

/* =========================================================
   8. 🌟 INTERACTIVE TOGGLE SWITCH (Pill Style)
   ========================================================= */
.toggle-group { display: flex; flex-direction: column; gap: 4px; }
.toggle-label { font-size: 11px; color: var(--text-secondary); margin-left: 4px; }

.bento-toggle-switch {
    background-color: rgba(0, 0, 0, 0.3); 
    border-radius: 12px; height: 40px;
    display: grid; grid-template-columns: 1fr 1fr;
    position: relative; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.03); padding: 3px;
}

.toggle-background {
    position: absolute; top: 3px; left: 3px;
    width: calc(50% - 3px); height: calc(100% - 6px);
    border-radius: 8px; background-color: var(--primary-accent); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.bento-toggle-switch.toggled .toggle-background { transform: translateX(100%); }

.toggle-option {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; font-weight: 500; color: var(--text-secondary); 
    z-index: 2; transition: color 0.3s ease;
}
.bento-toggle-switch .toggle-option.active { color: #ffffff; }
.toggle-option .material-symbols-outlined { font-size: 16px; }

/* =========================================================
   9. 👁️ VISION DASHBOARD LAYOUT (แนวนอน Landscape 16:9)
   ========================================================= */
#cam-view {
    overflow-y: auto !important; 
    padding-bottom: 20px;
}

.vision-dashboard-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: 16px;
    width: 100%;
    align-items: start; 
}

.vision-main-cam {
    padding: 0 !important; 
    border-radius: 20px;
    overflow: hidden;
    background-color: #000;
    width: 100%;
    aspect-ratio: 16 / 9; 
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.vision-main-cam .cam-viewport {
    width: 100%;
    height: 100%;
    position: relative;
}

.vision-main-cam .cam-placeholder {
    width: 100%; height: 100%; display: flex; flex-direction: column; 
    justify-content: center; align-items: center; background: rgba(13, 17, 23, 0.9);
}

#webcam-video, #ai-overlay {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; 
    position: absolute;
    top: 0;
    left: 0;
}

.vision-controls-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* =========================================================
   10. 🗂️ DB & TEACH LAYOUT (Dynamic Spanning)
   ========================================================= */
.dynamic-scroll-area {
    height: 55vh; 
    overflow-y: auto;
    padding-right: 10px;
}

.dynamic-masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-flow: dense; 
    gap: 12px;
}

.teach-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s;
}

.teach-card.wide { grid-column: span 2; } 
.teach-card.tall { grid-row: span 2; }    

.teach-card:hover {
    border-color: var(--primary-accent);
    background: rgba(88, 166, 255, 0.05);
}

.teach-card-key { font-weight: 700; color: var(--primary-accent); font-size: 14px; margin-bottom: 4px; }
.teach-card-val { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }

.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.minimal-btn {
    background: rgba(255,255,255,0.05); border: none; color: white; padding: 10px; border-radius: 12px;
    cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.2s;
}
.minimal-btn:hover { background: var(--primary-accent); }
.minimal-btn.danger:hover { background: var(--danger-color); }

.big-percent { font-size: 32px; font-weight: 800; color: var(--primary-accent); display: block; }
.storage-display-wrapper { display: flex; flex-direction: column; gap: 10px; }

/* =========================================================
   11. 📱 RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) { 
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .span-3-col { grid-column: span 2; }
    
    .vision-dashboard-layout { grid-template-columns: 1fr; }
    .vision-main-cam { aspect-ratio: 16 / 9; height: auto; }
}

@media (max-width: 768px) { 
    .bento-grid { grid-template-columns: 1fr; }
    .span-2-col, .span-3-col { grid-column: span 1; }
    .span-2-col .bento-content > div:last-child { grid-template-columns: 1fr !important; }
    .action-grid { grid-template-columns: 1fr; }
    .teach-card.wide { grid-column: span 1; } 
}