/* ========================================================= ALIVE Lecture App Styles Scoped to ========================================================= */ /* ---------- Base ---------- */ body.lecture-app { font-family: system-ui, Arial, sans-serif; margin: 0; background: #0f172a; color: #e2e8f0; } .lecture-app .container { max-width: 1080px; margin: 24px auto; padding: 0 16px; } .lecture-app video { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } /* ---------- Modal Overlay ---------- */ .lecture-app .modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 1000; } .lecture-app .hidden { display: none !important; } /* ---------- Modal Content ---------- */ .lecture-app .modal-content { width: min(900px, 96vw); max-height: 88vh; background: #111827; border-radius: 16px; padding: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; overflow: hidden; /* prevent outer scroll */ } /* ---------- Tabs ---------- */ .lecture-app .tabs { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .lecture-app .tabs button { background: #1f2937; color: #e5e7eb; padding: 8px 12px; border: none; border-radius: 8px; cursor: pointer; } .lecture-app .tabs button.active { background: #374151; } .lecture-app #closeModal { margin-left: auto; background: #ef4444; color: #fff; } /* ---------- Content Panes ---------- */ .lecture-app #chatPane, .lecture-app #voicePane { flex: 1; overflow-y: auto; padding-right: 4px; } /* ---------- Chat ---------- */ .lecture-app #chatLog { height: 220px; overflow-y: auto; border: 1px solid #374151; border-radius: 8px; padding: 8px; margin: 12px 0; background: #0b1220; } .lecture-app .msg.q { color: #cbd5e1; margin-bottom: 6px; } .lecture-app .msg.a { color: #a7f3d0; margin-bottom: 10px; } .lecture-app .chatInput { display: flex; gap: 8px; } .lecture-app #chatQ { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #334155; background: #0b1220; color: #e2e8f0; } /* ---------- Voice ---------- */ .lecture-app .voiceControls { display: flex; align-items: center; gap: 12px; margin: 12px 0; } /* ---------- Avatar Wrapper ---------- */ .lecture-app .avatarWrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; margin: 12px auto; width: 100%; max-width: 520px; } .lecture-app .status { opacity: 0.85; font-size: 14px; } /* ---------- Avatar ---------- */ .lecture-app .avatar { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 460px; background: #000; border-radius: 12px; display: flex; justify-content: center; align-items: center; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); margin: 0 auto; } .lecture-app .avatar img#avatarImg, .lecture-app .avatar video#avatarVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; background-color: #000; transition: opacity 0.4s ease; } .lecture-app #avatarImg { opacity: 1; z-index: 1; } .lecture-app #avatarVideo { opacity: 1; z-index: 2; } /* ---------- Earwave Animations ---------- */ .lecture-app .earwaves::before, .lecture-app .earwaves::after { content: ""; position: absolute; right: -6px; top: 40%; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; opacity: 0; filter: blur(2px); } .lecture-app .avatar.listening .earwaves::before { animation: ping 1.2s ease-out infinite; } .lecture-app .avatar.listening .earwaves::after { animation: ping 1.2s 0.4s ease-out infinite; } @keyframes ping { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(3); opacity: 0; } } /* ---------- Thinking Pulse ---------- */ .lecture-app .avatar.thinking { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); animation: thinkPulse 1.2s ease-in-out infinite; } @keyframes thinkPulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); } } /* ---------- Buttons ---------- */ .lecture-app button.danger { background: #b91c1c; color: #fff; border: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; } .lecture-app button.danger:hover { background: #7f1d1d; } /* ---------- Responsive Tweaks ---------- */ @media (max-width: 768px) { .lecture-app .modal-content { max-height: 92vh; padding: 12px; } .lecture-app #chatLog { height: 180px; } .lecture-app .avatar { max-width: 360px; } } @media (max-width: 480px) { .lecture-app .tabs button { padding: 6px 8px; font-size: 14px; } .lecture-app .avatar { max-width: 300px; } }