/* =============================================
 * Live Class Module - Himel Biology
 * New module stylesheet. Existing CSS files untouched.
============================================= */
:root {
    --lc-primary: #1b4d3e;
    --lc-purple: #800080;
    --lc-pink: #ff1493;
    --lc-live: #e53935;
    --lc-upcoming: #2d78c4;
    --lc-ended: #1b7a3d;
    --lc-bg: #f7f8fa;
    --lc-card-bg: #ffffff;
    --lc-border: #e6e6e6;
    --lc-shadow: 0 10px 25px rgba(27, 77, 62, 0.08);
}

* { box-sizing: border-box; font-family: "Mina", sans-serif; }

/* ---------- Listing page ---------- */
.lc-listing-page { background: var(--lc-bg); min-height: 70vh; padding: 40px 16px 60px; }
.lc-listing-container { max-width: 1200px; margin: 0 auto; }
.lc-listing-head { text-align: center; margin-bottom: 30px; }
.lc-listing-head h1 { color: var(--lc-primary); font-size: 28px; margin-bottom: 6px; }
.lc-listing-head p { color: #666; }

.lc-empty-state { text-align: center; padding: 60px 20px; color: #888; }
.lc-empty-state i { font-size: 40px; margin-bottom: 14px; color: #bbb; display: block; }

.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }

.lc-card { background: var(--lc-card-bg); border-radius: 14px; overflow: hidden; box-shadow: var(--lc-shadow); border: 1px solid var(--lc-border); transition: transform .2s ease; }
.lc-card:hover { transform: translateY(-4px); }

.lc-card-thumb { position: relative; aspect-ratio: 16/9; background: #000; }
.lc-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.lc-badge { position: absolute; top: 10px; left: 10px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.lc-badge-live { background: var(--lc-live); }
.lc-badge-upcoming { background: var(--lc-upcoming); }
.lc-badge-ended { background: var(--lc-ended); }
.lc-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; display: inline-block; animation: lcPulse 1.2s infinite; }
@keyframes lcPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.lc-viewers { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.65); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 12px; }

.lc-card-body { padding: 16px; }
.lc-card-body h3 { font-size: 17px; color: var(--lc-primary); margin-bottom: 8px; }
.lc-card-teacher, .lc-card-time { font-size: 13px; color: #666; margin-bottom: 4px; }
.lc-card-desc { font-size: 13px; color: #777; margin: 8px 0; }

.lc-join-btn { display: block; text-align: center; margin-top: 12px; padding: 10px; border-radius: 8px; background: linear-gradient(135deg, var(--lc-primary), var(--lc-purple)); color: #fff !important; text-decoration: none; font-weight: 600; font-size: 14px; }
.lc-join-btn.lc-locked { background: #999; }

/* ---------- Watch/player page ---------- */
.lc-watch-page { background: var(--lc-bg); min-height: 80vh; padding: 30px 16px 60px; }
.lc-watch-container { max-width: 1000px; margin: 0 auto; }

.lc-player-wrap { background: #111; border-radius: 14px; overflow: hidden; box-shadow: var(--lc-shadow); }
.lc-player-top-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #1a1a1a; }
.lc-player-top-bar .lc-badge { position: static; }
.lc-viewers { }
.lc-player-controls { display: flex; gap: 8px; }
.lc-icon-btn { background: rgba(255,255,255,.1); border: none; color: #fff; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; }
.lc-icon-btn:hover { background: rgba(255,255,255,.2); }

.lc-pinned-notice { background: #2d78c422; color: #fff; background-color: #17324a; padding: 10px 14px; font-size: 13px; border-left: 3px solid var(--lc-upcoming); }

.lc-player-frame-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.lc-player-frame { width: 100%; height: 100%; border: 0; }
.lc-player-fallback { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ccc; text-align: center; gap: 10px; padding: 20px; }
.lc-player-fallback i { font-size: 40px; opacity: .6; }
.lc-join-external-btn { background: linear-gradient(135deg, var(--lc-primary), var(--lc-purple)); color: #fff; padding: 10px 22px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.lc-zoom-embed-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; }
.lc-zoom-embed-wrap iframe { flex: 1; width: 100%; border: 0; }
.lc-zoom-fallback-note { background: #17324a; color: #cde; font-size: 12px; padding: 8px 14px; text-align: center; }
.lc-zoom-fallback-note a { color: #7fd4ff; }

.lc-watch-details { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; background: var(--lc-card-bg); border-radius: 14px; padding: 20px; box-shadow: var(--lc-shadow); }
.lc-watch-main { flex: 1 1 400px; }
.lc-watch-main h1 { font-size: 20px; color: var(--lc-primary); margin-bottom: 8px; }
.lc-watch-time { color: #666; font-size: 13px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lc-batch-tag { background: var(--lc-primary); color: #fff; padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.lc-watch-desc { color: #555; line-height: 1.6; font-size: 14px; }

.lc-teacher-card { flex: 0 0 220px; display: flex; align-items: center; gap: 12px; background: var(--lc-bg); border-radius: 12px; padding: 14px; align-self: flex-start; }
.lc-teacher-card img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.lc-teacher-card h4 { font-size: 14px; color: var(--lc-primary); }
.lc-teacher-card p { font-size: 12px; color: #777; }

@media (max-width: 768px) {
    .lc-teacher-card { flex: 1 1 100%; }
}

/* ---------- Side panel: chat / question / leaderboard ---------- */
.lc-watch-container-with-side { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.lc-watch-left { min-width: 0; }

.lc-side-panel { background: var(--lc-card-bg); border-radius: 14px; box-shadow: var(--lc-shadow); overflow: hidden; display: flex; flex-direction: column; height: 560px; }
.lc-side-tabs { display: flex; border-bottom: 1px solid var(--lc-border); }
.lc-side-tab { flex: 1; background: none; border: none; padding: 12px 6px; font-size: 12px; cursor: pointer; color: #777; }
.lc-side-tab.active { color: var(--lc-primary); font-weight: 700; border-bottom: 2px solid var(--lc-primary); }
.lc-side-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; }
.lc-side-empty { color: #999; text-align: center; margin-top: 30px; font-size: 13px; }

.lc-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.lc-chat-msg { display: flex; gap: 8px; }
.lc-chat-msg-pinned { background: #fff8e1; border-radius: 8px; padding: 6px; }
.lc-chat-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lc-chat-bubble strong { font-size: 12px; color: var(--lc-primary); display: block; }
.lc-chat-bubble p { font-size: 13px; margin: 2px 0 0; word-break: break-word; }
.lc-chat-input-row { display: flex; gap: 6px; margin-top: 10px; }
.lc-chat-input-row input { flex: 1; border: 1px solid var(--lc-border); border-radius: 20px; padding: 8px 14px; font-size: 13px; }
.lc-chat-input-row button { background: var(--lc-primary); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.lc-chat-locked { text-align: center; margin-top: 10px; font-size: 13px; }
.lc-chat-locked a { color: var(--lc-purple); }

.lc-mcq-card { background: var(--lc-bg); border-radius: 10px; padding: 12px; }
.lc-mcq-image { width: 100%; border-radius: 8px; margin-bottom: 8px; }
.lc-mcq-text { font-size: 14px; font-weight: 600; color: var(--lc-primary); margin-bottom: 10px; }
.lc-mcq-options { display: flex; flex-direction: column; gap: 8px; }
.lc-mcq-option { text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--lc-border); background: #fff; cursor: pointer; font-size: 13px; }
.lc-mcq-option:hover { border-color: var(--lc-primary); }
.lc-mcq-option:disabled { cursor: default; opacity: .8; }
.lc-mcq-option.lc-mcq-correct { background: #e8f9ee; border-color: #1b7a3d; color: #1b7a3d; font-weight: 700; }
.lc-mcq-option.lc-mcq-wrong { background: #fdecea; border-color: #c0392b; color: #c0392b; }

.lc-leaderboard-list { display: flex; flex-direction: column; gap: 6px; }
.lc-lb-row { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--lc-bg); font-size: 12px; }
.lc-lb-rank { font-weight: 700; color: var(--lc-purple); }
.lc-lb-name { font-weight: 600; color: var(--lc-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-lb-stat { color: #666; }
.lc-lb-acc { font-weight: 700; color: var(--lc-live); }

@media (max-width: 900px) {
    .lc-watch-container-with-side { grid-template-columns: 1fr; }
    .lc-side-panel { height: 460px; }
}