/* Widget Container — Fixed Position Bottom Right */ .widgets-container { position: fixed; bottom: var(--space-5, 1.25rem); right: var(--space-5, 1.25rem); z-index: var(--z-floating, 1050); display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); } /* Widget Buttons — Floating Action Buttons */ .widget-button { width: 60px; height: 60px; border-radius: 50%; border: none; color: var(--color-text-inverse, #ffffff); font-size: 1.5rem; cursor: pointer; transition: all var(--transition-base, 200ms ease); box-shadow: var(--box-shadow-lg, 0 4px 15px rgba(0, 0, 0, 0.2)); } .widget-button:hover { transform: scale(1.1); box-shadow: var(--shadow-xl, 0 6px 20px rgba(0, 0, 0, 0.25)); } .accessibility-button { background: linear-gradient(45deg, var(--color-secondary, #8B7EC8), #7B6EB8); } .chat-button { background: linear-gradient(45deg, var(--color-primary, #6366f1), var(--color-accent, #818cf8)); } /* Theme Toggle — Fixed Top Right */ .theme-toggle-container { position: fixed; top: var(--space-5, 1.25rem); right: 60px; z-index: var(--z-header, 999); } .theme-toggle-button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border, #e0e0ea); background: var(--color-bg, #f5f5fa); color: var(--color-text, #1a1a2e); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-base, 200ms ease); padding: 0; } .theme-toggle-button:hover { transform: scale(1.1); box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15)); } .theme-toggle-button:focus { outline: 2px solid var(--color-primary, #6366f1); outline-offset: 2px; } .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } [data-theme="dark"] .theme-icon-sun { display: block; } [data-theme="dark"] .theme-icon-moon { display: none; } /* Language Selector — Fixed Top Right */ .language-selector { position: fixed; top: var(--space-5, 1.25rem); right: 100px; z-index: var(--z-header, 999); background: var(--color-bg, #ffffff); border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-lg, 8px); padding: 5px; } .language-selector select { background: transparent; border: none; color: var(--color-text, #1f2937); padding: 5px 10px; cursor: pointer; outline: none; } /* Loading Spinner Animation */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: var(--color-text-inverse, #fff); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Fade-in Animation for Panels */ .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }