/* extracted from NewLivee/index.php — visual-identical demo */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
    --navy:#0f172a; --navy-mid:#1e2a47; --navy-light:#2d3a5e;
    --blue:#3b82f6; --blue-dark:#2563eb; --indigo:#6366f1;
    --surface:#f8fafc; --card-bg:#ffffff; --border:#e2e8f0;
    --text-main:#0f172a; --text-sub:#475569; --text-muted:#94a3b8;
    --green:#22c55e; --green-dark:#15803d; --red:#ef4444; --red-dark:#b91c1c;
    --amber:#f59e0b;
    --radius-lg:28px; --radius-md:20px; --radius-sm:12px;
    --shadow-sm:0 4px 12px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:0 10px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.02);
    --shadow-lg:0 20px 40px -12px rgba(0,0,0,0.2);
    --oc-sat-env: env(safe-area-inset-top, 0px);
    --oc-sar-env: env(safe-area-inset-right, 0px);
    --oc-sab-env: env(safe-area-inset-bottom, 0px);
    --oc-sal-env: env(safe-area-inset-left, 0px);
    --oc-sat-vv: 0px;
    --oc-sab-vv: 0px;
    --oc-sat: max(var(--oc-sat-env), var(--oc-sat-vv));
    --oc-sab: max(var(--oc-sab-env), var(--oc-sab-vv));
    --oc-sar: var(--oc-sar-env);
    --oc-sal: var(--oc-sal-env);
    --oc-vh: 100vh;
    --oc-bottom-chrome-h: 0px;
}
@supports (height: 100dvh) {
    :root { --oc-vh: 100dvh; }
}

html {
    height: -webkit-fill-available;
}

body {
    font-family:'Vazirmatn', sans-serif;
    background:#eef2ff;
    color:var(--text-main);
    height: var(--oc-vh);
    min-height: -webkit-fill-available;
    overflow:hidden;
    position:relative;
}

.oc-page-bg {
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.oc-page-bg svg { width:100%; height:100%; display:block; }

svg { stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.oc-page-bg svg { stroke:none; fill:none; }

.oc-layout { display:flex; flex-direction:column; height:var(--oc-vh); max-height:var(--oc-vh); max-width:1100px; margin:0 auto; position:relative; z-index:1; }

/* ---------- TOP BAR ---------- */
.oc-topbar {
    background:linear-gradient(135deg, var(--navy) 0%, #1e293b 100%);
    color:#fff; padding:calc(12px + var(--oc-sat)) calc(18px + var(--oc-sar)) 12px calc(18px + var(--oc-sal));
    display:flex; align-items:center; gap:14px;
    box-shadow:var(--shadow-md); z-index:30; flex-shrink:0;
}
.oc-back-btn {
    width:40px; height:40px; border-radius:14px; border:none;
    background:rgba(255,255,255,0.12); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:all 0.2s;
}
.oc-back-btn:hover { background:rgba(255,255,255,0.25); }
.oc-back-btn svg { width:20px; height:20px; }
.oc-class-info { flex:1; min-width:0; }
.oc-class-title { font-size:1rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-class-sub { font-size:0.72rem; color:rgba(255,255,255,0.6); display:flex; gap:10px; flex-wrap:wrap; }
.oc-live-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--red); padding:3px 10px; border-radius:30px;
    font-size:0.68rem; font-weight:700; flex-shrink:0;
}
.oc-live-dot { width:7px; height:7px; border-radius:50%; background:#fff; animation:livePulse 1.4s infinite; }
@keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.oc-timer {
    background:rgba(255,255,255,0.12); padding:5px 12px; border-radius:30px;
    font-size:0.78rem; font-weight:700; flex-shrink:0; font-variant-numeric:tabular-nums;
}

/* ---------- CONNECTION STATUS (topbar) ---------- */
.oc-conn-status {
    display:flex; align-items:center; gap:5px; flex-shrink:0;
}
.oc-conn-pill {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(255,255,255,0.1); padding:4px 8px; border-radius:20px;
    border:1px solid rgba(255,255,255,0.08);
}
.oc-conn-led {
    width:9px; height:9px; border-radius:50%; flex-shrink:0;
    background:#64748b; box-shadow:0 0 0 1px rgba(0,0,0,0.25);
    transition:background 0.25s, box-shadow 0.25s;
}
.oc-conn-led-ok { background:#22c55e; box-shadow:0 0 7px rgba(34,197,94,0.85); }
.oc-conn-led-warn { background:#f59e0b; box-shadow:0 0 7px rgba(245,158,11,0.75); }
.oc-conn-led-bad { background:#ef4444; box-shadow:0 0 7px rgba(239,68,68,0.85); animation:connLedBlink 1.1s infinite; }
.oc-conn-led-off { background:#64748b; opacity:0.65; }
@keyframes connLedBlink { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.oc-conn-lbl { font-size:0.62rem; font-weight:700; color:rgba(255,255,255,0.88); white-space:nowrap; }
.oc-media-antenna {
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; position:relative; flex-shrink:0;
    padding:0; margin:0; background:none; border:none;
    width:26px; height:44px;
    transition:transform 0.15s, opacity 0.15s;
}
.oc-media-antenna:hover { opacity:0.92; transform:scale(1.04); }
.oc-media-antenna:active { transform:scale(0.97); }
.oc-ant-svg {
    width:26px; height:44px; display:block; flex-shrink:0; overflow:visible;
}
.oc-ant-pole { fill:none; stroke:rgba(255,255,255,0.88); stroke-width:2.2; stroke-linecap:round; transition:stroke 0.25s; }
.oc-ant-tip, .oc-ant-base { stroke:none; fill:rgba(255,255,255,0.88); transition:fill 0.25s; }
.oc-ant-bar {
    fill:none; stroke:rgba(255,255,255,0.28); stroke-width:2.4; stroke-linecap:round;
    transition:stroke 0.25s, opacity 0.25s;
}
.oc-ant-bar.lit { opacity:1; }
.oc-media-antenna.q-1 .oc-ant-bar.lit { stroke:#ef4444; }
.oc-media-antenna.q-2 .oc-ant-bar.lit { stroke:#f59e0b; }
.oc-media-antenna.q-3 .oc-ant-bar.lit { stroke:#84cc16; }
.oc-media-antenna.q-4 .oc-ant-bar.lit { stroke:#22c55e; }
.oc-ant-x { opacity:0; pointer-events:none; transition:opacity 0.2s; }
.oc-ant-x-bg { fill:rgba(239,68,68,0.22); stroke:none; }
.oc-ant-x line { stroke:#ef4444; stroke-width:3; stroke-linecap:round; }
.oc-media-antenna.is-disconnected .oc-ant-x { opacity:1; }
.oc-media-antenna.is-disconnected .oc-ant-bar.lit { stroke:rgba(255,255,255,0.15); opacity:0.3; }
.oc-media-antenna.is-disconnected .oc-ant-pole { stroke:rgba(148,163,184,0.55); }
.oc-media-antenna.is-disconnected .oc-ant-tip,
.oc-media-antenna.is-disconnected .oc-ant-base { fill:rgba(148,163,184,0.55); }
.oc-media-antenna.is-connecting .oc-ant-bar-1 {
    stroke:#f59e0b; opacity:1;
    animation:ocAntPulse 1.1s ease-in-out infinite;
}
@keyframes ocAntPulse { 0%,100%{opacity:0.35;} 50%{opacity:1;} }
@media (max-width:560px) {
    .oc-msg { max-width:min(88%, calc(100vw - 56px)); }
    .oc-file-card { min-width:0; max-width:100%; }
    .oc-audio-file { min-width:0; max-width:100%; }
    .oc-conn-lbl { display:none; }
}

/* ---------- VOICE VISUALIZER BAR (when teacher speaks) ---------- */
.oc-voicebar {
    background:linear-gradient(135deg, var(--indigo), var(--blue));
    color:#fff; overflow:hidden;
    max-height:0; transition:max-height 0.35s cubic-bezier(0.2,0.9,0.4,1.1);
    flex-shrink:0; z-index:25;
}
.oc-voicebar.active { max-height:90px; }
.oc-voicebar-inner { padding:10px 18px; display:flex; align-items:center; gap:14px; }
.oc-voicebar-label { font-size:0.8rem; font-weight:700; white-space:nowrap; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.oc-voicebar-label svg { width:18px; height:18px; }
.oc-voicebar-close {
    flex-shrink:0; width:32px; height:32px; border:none; border-radius:10px;
    background:rgba(255,255,255,0.18); color:#fff; cursor:pointer;
    font-size:1.25rem; line-height:1; display:none; align-items:center; justify-content:center;
    transition:background 0.15s;
}
.oc-voicebar-close:hover { background:rgba(255,255,255,0.32); }
body.oc-is-teacher .oc-voicebar.active .oc-voicebar-close { display:inline-flex; }
#voiceCanvas { flex:1; height:46px; display:block; min-width:0; }

/* ---------- MAIN AREA ---------- */
.oc-main { flex:1; display:flex; overflow:hidden; position:relative; }

/* CHAT COLUMN */
.oc-chat-col { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

.oc-messages {
    flex:1; overflow-y:auto; padding:16px;
    display:flex; flex-direction:column; gap:12px;
    scroll-behavior:smooth;
}
.oc-messages::-webkit-scrollbar { width:5px; }
.oc-messages::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }

/* message bubble */
.oc-msg { display:flex; gap:10px; max-width:82%; animation:msgIn 0.25s ease; }
@keyframes msgIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.oc-msg.own { align-self:flex-start; flex-direction:row; }
.oc-msg.other { align-self:flex-end; flex-direction:row-reverse; }
.oc-msg-avatar {
    width:38px; height:38px; border-radius:13px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:0.85rem; font-weight:800; color:#fff;
}
.oc-msg-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.oc-msg-name { font-size:0.72rem; font-weight:700; color:var(--text-sub); padding:0 4px; }
.oc-msg.own .oc-msg-name { text-align:left; color:var(--blue-dark); }
.oc-msg.other .oc-msg-name { text-align:right; }
.oc-bubble {
    padding:10px 14px; border-radius:18px; font-size:0.9rem; line-height:1.7;
    word-wrap:break-word; overflow-wrap:anywhere; box-shadow:var(--shadow-sm); position:relative;
    max-width:100%; overflow:hidden; box-sizing:border-box;
}
.oc-bubble img, .oc-bubble video, .oc-bubble .oc-msg-media-wrap { max-width:100%; }
.oc-msg.own .oc-bubble { background:linear-gradient(135deg, var(--blue), var(--blue-dark)); color:#fff; border-top-right-radius:6px; }
.oc-msg.other .oc-bubble { background:#fff; color:var(--text-main); border-top-left-radius:6px; }
.oc-msg-time { font-size:0.62rem; color:var(--text-muted); padding:0 4px; }
.oc-msg.own .oc-msg-time { text-align:left; }

/* system message */
.oc-sys-msg {
    align-self:center; background:rgba(148,163,184,0.18); color:var(--text-sub);
    padding:5px 14px; border-radius:30px; font-size:0.72rem; font-weight:600;
}

/* image message — responsive inside bubble/card on all viewports */
.oc-msg-image {
    border-radius:14px; max-width:100%; width:auto; height:auto;
    max-height:min(260px, 45vh); object-fit:contain; cursor:pointer; display:block;
}
.oc-msg-media-wrap { display:flex; flex-direction:column; gap:6px; max-width:100%; width:100%; min-width:0; box-sizing:border-box; }
.oc-msg-image-box { position:relative; display:block; max-width:100%; width:100%; min-width:0; box-sizing:border-box; }
.oc-msg-image-box.oc-wb-img-box {
    background:#fff; border-radius:14px; padding:4px;
    border:1px solid rgba(0,0,0,0.08); box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.oc-wb-img-box .oc-msg-image { object-fit:contain; background:#fff; max-height:min(280px, 50vh); }
.oc-video-shell { max-width:100%; width:100%; min-width:0; box-sizing:border-box; }
.oc-img-dl-btn {
    position:absolute; top:8px; left:8px; width:32px; height:32px; border:none; border-radius:10px;
    background:rgba(15,23,42,0.72); color:#fff; cursor:pointer; font-size:0.95rem;
    display:flex; align-items:center; justify-content:center; opacity:0.92;
}
.oc-img-dl-btn:hover { background:rgba(15,23,42,0.9); }

/* file message */
.oc-msg-file {
    display:flex; align-items:flex-start; gap:10px; padding:8px 10px;
    min-width:200px; max-width:280px; border-radius:14px;
    background:rgba(255,255,255,0.12);
}
.oc-msg.other .oc-msg-file { background:var(--surface); border:1px solid var(--border); }
.oc-file-icon {
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center;
}
.oc-msg.other .oc-file-icon { background:var(--surface); color:var(--blue); }
.oc-file-icon svg { width:22px; height:22px; }
.oc-file-meta { min-width:0; }
.oc-file-name { font-size:0.82rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.oc-file-size { font-size:0.68rem; opacity:0.7; margin-top:2px; }
.oc-file-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.oc-file-btn {
    border:none; border-radius:10px; padding:6px 10px; font-size:0.72rem; font-weight:800;
    font-family:inherit; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:5px;
    background:rgba(255,255,255,0.18); color:inherit; min-height:34px; touch-action:manipulation;
}
.oc-file-btn-ico { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.oc-file-btn svg { width:14px; height:14px; }
.oc-msg.other .oc-file-btn { background:var(--blue); color:#fff; }
.oc-file-btn-dl { background:rgba(34,197,94,0.85); color:#fff; }
.oc-msg.other .oc-file-btn-dl { background:var(--green-dark); }

/* voice message player */
.oc-voice-msg { display:flex; align-items:center; gap:10px; min-width:200px; padding:2px; }
.oc-voice-play {
    width:40px; height:40px; border-radius:50%; flex-shrink:0; cursor:pointer; border:none;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.22); color:inherit; transition:transform 0.15s;
}
.oc-msg.other .oc-voice-play { background:var(--blue); color:#fff; }
.oc-voice-play:active { transform:scale(0.92); }
.oc-voice-play svg { width:18px; height:18px; fill:currentColor; stroke:none; }
.oc-voice-wave { flex:1; display:flex; align-items:center; gap:2px; height:34px; }
.oc-voice-wave span {
    flex:1; background:currentColor; border-radius:2px; opacity:0.55;
    min-height:4px; transition:opacity 0.15s, height 0.15s;
}
.oc-voice-dur { font-size:0.68rem; opacity:0.8; flex-shrink:0; font-variant-numeric:tabular-nums; }

/* custom audio file player */
.oc-audio-file {
    min-width:220px; max-width:280px; padding:12px 14px; border-radius:16px;
    background:linear-gradient(135deg, rgba(99,102,241,0.92) 0%, rgba(59,130,246,0.88) 55%, rgba(14,165,233,0.85) 100%);
    color:#fff; box-shadow:0 4px 18px rgba(59,130,246,0.25);
}
.oc-msg.other .oc-audio-file {
    background:linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #dbeafe 100%);
    color:var(--text); box-shadow:var(--shadow-sm); border:1px solid var(--border);
}
.oc-audio-file-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.oc-audio-file-disc {
    width:38px; height:38px; border-radius:50%; flex-shrink:0; position:relative;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.45), rgba(255,255,255,0.08));
    border:2px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center;
}
.oc-msg.other .oc-audio-file-disc { border-color:rgba(59,130,246,0.35); background:radial-gradient(circle at 35% 35%, #fff, #dbeafe); }
.oc-audio-file-disc-inner {
    width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.9);
}
.oc-msg.other .oc-audio-file-disc-inner { background:var(--blue); }
.oc-audio-file-disc.playing { animation:ocDiscSpin 2.8s linear infinite; }
@keyframes ocDiscSpin { to { transform:rotate(360deg); } }
.oc-audio-file-meta { flex:1; min-width:0; }
.oc-audio-file-tag { display:block; font-size:0.62rem; font-weight:800; opacity:0.85; letter-spacing:0.02em; }
.oc-audio-file-title {
    display:block; font-size:0.76rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;
}
.oc-audio-file-play {
    width:36px; height:36px; border-radius:50%; flex-shrink:0; border:none; cursor:pointer;
    background:rgba(255,255,255,0.22); color:inherit; display:flex; align-items:center; justify-content:center;
    transition:transform 0.15s, background 0.15s;
}
.oc-msg.other .oc-audio-file-play { background:var(--blue); color:#fff; }
.oc-audio-file-play:active { transform:scale(0.92); }
.oc-audio-file-play svg { width:16px; height:16px; fill:currentColor; stroke:none; }
.oc-audio-file-track {
    height:6px; border-radius:6px; background:rgba(255,255,255,0.22); cursor:pointer; overflow:hidden; direction:ltr;
}
.oc-msg.other .oc-audio-file-track { background:rgba(59,130,246,0.15); }
.oc-audio-file-fill {
    height:100%; width:0; border-radius:6px;
    background:linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
    transition:width 0.08s linear;
}
.oc-msg.other .oc-audio-file-fill { background:linear-gradient(90deg, var(--blue), var(--blue-dark)); }
.oc-audio-file-times {
    display:flex; justify-content:space-between; font-size:0.62rem; opacity:0.82; margin-top:6px;
    font-variant-numeric:tabular-nums; direction:ltr;
}

/* typing / speaking indicator */
.oc-typing-row { align-self:flex-end; display:none; padding:0 4px; }
.oc-typing-row.active { display:flex; align-items:center; gap:8px; }
.oc-typing-bubble {
    background:#fff; padding:10px 14px; border-radius:18px; border-top-left-radius:6px;
    box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:8px;
}
.oc-typing-text { font-size:0.78rem; color:var(--text-sub); font-weight:600; }
.oc-typing-dots { display:flex; gap:3px; }
.oc-typing-dots span { width:6px; height:6px; border-radius:50%; background:var(--text-muted); animation:typingDot 1.2s infinite; }
.oc-typing-dots span:nth-child(2){ animation-delay:0.2s; }
.oc-typing-dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes typingDot { 0%,60%,100%{transform:translateY(0); opacity:0.4;} 30%{transform:translateY(-5px); opacity:1;} }

.oc-msg-text.oc-msg-caption { margin-top:6px; font-size:0.86rem; line-height:1.5; }

/* chat disabled overlay note */
.oc-chat-disabled-note {
    align-self:center; background:#fef3c7; color:#92400e;
    padding:6px 16px; border-radius:30px; font-size:0.74rem; font-weight:700;
    display:none;
}
.oc-chat-disabled-note.active { display:block; }

/* teacher: start-class prompt (center of chat area) */
.oc-messages-wrap { flex:1; position:relative; min-height:0; display:flex; flex-direction:column; }
.oc-new-msgs-btn {
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:12;
    display:none; align-items:center; gap:6px; padding:8px 16px; border:none; border-radius:20px;
    background:linear-gradient(135deg, var(--blue), var(--blue-dark)); color:#fff;
    font-family:inherit; font-size:0.78rem; font-weight:800; cursor:pointer;
    box-shadow:0 4px 16px rgba(59,130,246,0.35); touch-action:manipulation;
}
.oc-new-msgs-btn.show { display:inline-flex; }
.oc-video-float-actions {
    position:absolute; top:8px; left:8px; display:flex; gap:6px; z-index:3;
}
.oc-video-act-btn {
    width:32px; height:32px; border-radius:10px; border:none; cursor:pointer;
    background:rgba(15,23,42,0.62); color:#fff; display:flex; align-items:center; justify-content:center;
}
.oc-video-act-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.oc-video-lightbox {
    position:fixed; inset:0; background:rgba(0,0,0,0.94); z-index:9100;
    display:none; align-items:center; justify-content:center; padding:16px; flex-direction:column; gap:12px;
}
.oc-video-lightbox.open { display:flex; }
.oc-video-lightbox video { max-width:100%; max-height:calc(100vh - 100px); border-radius:12px; background:#000; }
.oc-video-lightbox-tools { display:flex; gap:10px; align-items:center; }
.oc-video-lightbox-tools button {
    width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
    background:rgba(255,255,255,0.18); color:#fff; font-size:1.1rem;
}
.oc-video-lightbox-close { position:absolute; top:16px; left:16px; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,0.18); color:#fff; font-size:1.3rem; }
.oc-start-class-prompt {
    position:absolute; inset:0; z-index:12;
    display:none; align-items:center; justify-content:center;
    padding:24px 20px;
    background:linear-gradient(180deg, rgba(238,242,255,0.92) 0%, rgba(226,232,240,0.78) 100%);
    pointer-events:none;
}
.oc-start-class-prompt.open { display:flex; }
.oc-start-class-card {
    pointer-events:auto;
    max-width:380px; width:100%;
    background:#fff; border-radius:24px;
    padding:28px 26px 24px;
    text-align:center;
    box-shadow:0 18px 40px -14px rgba(15,23,42,0.18), 0 0 0 1px rgba(59,130,246,0.08);
    animation:startPromptIn 0.35s ease;
}
@keyframes startPromptIn { from{opacity:0; transform:translateY(12px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);} }
.oc-start-class-icon {
    width:64px; height:64px; margin:0 auto 16px;
    border-radius:20px;
    background:linear-gradient(135deg, rgba(34,197,94,0.14), rgba(59,130,246,0.12));
    color:var(--green-dark);
    display:flex; align-items:center; justify-content:center;
}
.oc-start-class-icon svg { width:30px; height:30px; fill:currentColor; stroke:none; }
.oc-start-class-title {
    font-size:1.12rem; font-weight:900; color:var(--navy);
    margin-bottom:10px; line-height:1.6;
}
.oc-start-class-desc {
    font-size:0.86rem; color:var(--text-sub); line-height:1.85;
    margin-bottom:20px; font-weight:600;
}
.oc-start-class-desc strong { color:var(--navy); font-weight:800; }
.oc-start-class-btn {
    width:100%; border:none; cursor:pointer;
    padding:14px 18px; border-radius:16px;
    background:linear-gradient(135deg, var(--green), var(--green-dark));
    color:#fff; font-family:inherit;
    font-size:0.95rem; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 10px 22px -8px rgba(21,128,61,0.55);
    transition:transform 0.15s, box-shadow 0.15s;
}
.oc-start-class-btn:hover { transform:translateY(-1px); box-shadow:0 14px 26px -8px rgba(21,128,61,0.6); }
.oc-start-class-btn:active { transform:translateY(0); }
.oc-start-class-btn svg { width:20px; height:20px; fill:currentColor; stroke:none; }
.oc-start-class-hint {
    display:block; margin-top:14px;
    font-size:0.72rem; color:var(--text-muted); font-weight:600; line-height:1.6;
}
.oc-start-stop-btn {
    width:auto; min-width:40px; padding:0 14px; gap:8px;
    font-family:inherit; font-size:0.78rem; font-weight:800;
}
.oc-start-stop-btn svg { width:18px; height:18px; flex-shrink:0; }
.oc-start-stop-btn.oc-active { background:rgba(239,68,68,0.22); }

.oc-exit-modal-box { text-align:center; padding:8px 0 4px; }
.oc-exit-modal-box p { font-size:0.9rem; color:var(--text-sub); line-height:1.7; margin:12px 0 20px; }
.oc-exit-modal-actions { display:flex; gap:10px; }
.oc-exit-modal-actions button {
    flex:1; border:none; border-radius:14px; padding:12px; font-family:inherit;
    font-size:0.88rem; font-weight:800; cursor:pointer;
}
.oc-exit-modal-cancel { background:var(--surface); color:var(--text-sub); border:1.5px solid var(--border) !important; }
.oc-wb-student-mic-btn {
    display:none; align-items:center; gap:6px; padding:0 12px; height:34px;
    border-radius:10px; border:1.5px solid rgba(34,197,94,0.45);
    background:linear-gradient(135deg,#ecfdf5,#dcfce7); color:#166534;
    font-size:0.76rem; font-weight:800; cursor:pointer; font-family:inherit;
    white-space:nowrap; flex-shrink:0;
}
.oc-wb-student-mic-btn.active {
    background:linear-gradient(135deg,#fee2e2,#fecaca); color:#b91c1c;
    border-color:rgba(239,68,68,0.45);
}
.oc-wb-student-mic-btn:hover { filter:brightness(0.98); }

/* share class modal */
.oc-share-modal { max-width:480px !important; }
.oc-share-head {
    background:linear-gradient(135deg, #4f46e5 0%, #3b82f6 50%, #06b6d4 100%) !important;
}
.oc-share-preview {
    background:linear-gradient(145deg, rgba(99,102,241,0.08), rgba(34,197,94,0.08));
    border:1px solid rgba(99,102,241,0.16);
    border-radius:16px; padding:12px 14px; text-align:center; margin-bottom:12px;
}
.oc-share-emojis { font-size:1.15rem; letter-spacing:3px; margin-bottom:6px; }
.oc-share-preview-title {
    font-size:1rem; font-weight:900; color:var(--navy); line-height:1.7; margin-bottom:8px;
}
.oc-share-preview-sub {
    font-size:0.82rem; color:var(--text-sub); line-height:1.8; font-weight:600; margin-bottom:10px;
}
.oc-share-teacher {
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--border); border-radius:999px;
    padding:7px 14px; font-size:0.8rem; font-weight:800; color:var(--navy);
}
.oc-share-link-box {
    display:flex; gap:6px; align-items:center; margin-bottom:12px;
    padding:5px 5px 5px 10px; border:1px solid var(--border); border-radius:14px;
    background:linear-gradient(135deg, #f8fafc, #fff);
}
.oc-share-link-input {
    flex:1; min-width:0; border:none; border-radius:0; padding:8px 4px;
    font-family:inherit; font-size:0.72rem; color:var(--navy); font-weight:600;
    background:transparent; direction:ltr; text-align:left;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oc-share-copy-btn {
    border:none; cursor:pointer; border-radius:10px; padding:8px 12px;
    background:linear-gradient(135deg, var(--green), var(--green-dark));
    color:#fff; font-family:inherit; font-size:0.72rem; font-weight:800; white-space:nowrap;
    display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
}
.oc-share-copy-btn.copied { background:linear-gradient(135deg, #16a34a, #15803d); }
.oc-share-native-btn {
    width:100%; border:none; cursor:pointer; border-radius:14px;
    padding:11px 14px; margin-bottom:12px;
    background:linear-gradient(135deg, #6366f1, #3b82f6);
    color:#fff; font-family:inherit; font-size:0.82rem; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 8px 18px -8px rgba(59,130,246,0.4);
    transition:transform 0.15s, box-shadow 0.15s;
}
.oc-share-native-btn:hover { transform:translateY(-1px); }
.oc-share-native-btn svg { width:20px; height:20px; }
.oc-share-textarea {
    width:100%; min-height:72px; max-height:120px; resize:vertical;
    border:1.5px solid var(--border); border-radius:12px;
    padding:10px 12px; font-family:inherit; font-size:0.74rem; line-height:1.65;
    color:var(--text-main); background:#fff;
}
.oc-share-hint {
    margin-top:10px; font-size:0.72rem; color:var(--text-muted); line-height:1.7; font-weight:600;
}

/* ---------- INPUT AREA ---------- */
.oc-inputbar {
    padding:8px 10px calc(8px + var(--oc-sab)); background:#fff;
    border-top:1px solid var(--border); flex-shrink:0;
    position:sticky; bottom:0; z-index:28;
    box-shadow:0 -6px 24px rgba(15,23,42,0.07);
}
body.oc-kb-open .oc-dock { visibility:hidden !important; pointer-events:none !important; }
body.oc-kb-open .oc-inputbar { box-shadow:0 -8px 28px rgba(15,23,42,0.14); }
.oc-input-row {
    display:flex !important; align-items:flex-end; gap:4px;
    min-height:44px; flex-shrink:0;
}
.oc-input-side { display:flex; align-items:flex-end; gap:3px; flex-shrink:0; }
.oc-attach-btn, .oc-emoji-btn, .oc-mic-btn {
    width:34px; height:34px; border-radius:11px; border:none; flex-shrink:0; cursor:pointer;
    background:var(--surface); color:var(--text-sub);
    display:flex !important; align-items:center; justify-content:center; transition:all 0.2s;
    touch-action:manipulation; user-select:none; -webkit-user-select:none;
    visibility:visible; opacity:1;
}
.oc-attach-btn:hover, .oc-emoji-btn:hover { background:var(--border); color:var(--navy); }
.oc-attach-btn.oc-compose-off, .oc-mic-btn.oc-compose-off {
    opacity:0.62; color:var(--text-muted);
}
.oc-attach-btn svg, .oc-emoji-btn svg, .oc-mic-btn svg { width:17px; height:17px; flex-shrink:0; }
.oc-text-input {
    flex:1; min-width:0; border:1.5px solid var(--border); border-radius:20px; padding:10px 14px;
    font-family:inherit; font-size:0.9rem; line-height:1.45; resize:none;
    max-height:132px; min-height:40px; overflow-y:auto;
    background:#fff; transition:border-color 0.2s;
}
.oc-text-input:focus { outline:none; border-color:var(--blue); }
.oc-text-input:disabled { background:var(--surface); cursor:not-allowed; }
.oc-send-btn {
    width:36px; height:36px; border-radius:12px; border:none; flex-shrink:0; cursor:pointer;
    background:linear-gradient(135deg, var(--blue), var(--blue-dark)); color:#fff;
    display:flex !important; align-items:center; justify-content:center; transition:all 0.2s;
    visibility:visible; opacity:1;
}
.oc-send-btn.oc-compose-off { opacity:0.55; }
.oc-send-btn:hover { transform:translateY(-1px); box-shadow:0 6px 14px -4px rgba(59,130,246,0.45); }
.oc-send-btn svg { width:18px; height:18px; }
.oc-mic-btn.recording { background:var(--red); color:#fff; animation:micPulse 1.2s infinite; transform:scale(1.06); }
.oc-mic-btn.oc-mic-hold-hint {
    box-shadow:0 0 0 2px rgba(239,68,68,0.35);
    flex-direction:column; gap:1px; padding:2px 5px 3px; width:auto; min-width:34px; height:auto; min-height:34px;
}
.oc-mic-hold-badge {
    font-size:0.58rem; line-height:1; opacity:0.88; pointer-events:none; user-select:none;
}
.oc-mic-btn.recording .oc-mic-hold-badge { display:none; }
@keyframes micPulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.5);} 50%{box-shadow:0 0 0 8px rgba(239,68,68,0);} }

/* emoji picker */
.oc-emoji-panel {
    display:none; flex-wrap:wrap; gap:4px; padding:10px;
    background:#fff; border:1px solid var(--border); border-radius:16px;
    margin-bottom:8px; max-height:160px; overflow-y:auto;
}
.oc-emoji-panel.active { display:flex; }
.oc-emoji-panel span { font-size:1.4rem; cursor:pointer; padding:4px; border-radius:8px; transition:background 0.15s; }
.oc-emoji-panel span:hover { background:var(--surface); }

/* recording indicator inside input */
.oc-recording-row {
    display:none; align-items:center; gap:12px; padding:8px 14px;
    background:#fef2f2; border:1px solid #fecaca; border-radius:22px; margin-bottom:8px;
}
.oc-recording-row.active { display:flex; }
.oc-rec-dot { width:10px; height:10px; border-radius:50%; background:var(--red); animation:livePulse 1s infinite; }
.oc-rec-time { font-weight:700; color:var(--red-dark); font-variant-numeric:tabular-nums; }
.oc-rec-cancel, .oc-rec-send { border:none; cursor:pointer; padding:6px 14px; border-radius:12px; font-family:inherit; font-weight:700; font-size:0.78rem; }
.oc-rec-cancel { background:var(--surface); color:var(--text-sub); }
.oc-rec-send { background:var(--green); color:#fff; }

/* attachment preview (upload first, then send with text) */
.oc-attach-preview {
    display:none; flex-direction:column; gap:8px; padding:10px 12px; margin-bottom:8px;
    background:linear-gradient(135deg, #eff6ff, #f0fdf4); border:1px solid rgba(59,130,246,0.25);
    border-radius:16px;
}
.oc-attach-preview.active { display:flex; }
.oc-attach-preview-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.oc-attach-type-badge {
    font-size:0.72rem; font-weight:800; color:var(--blue-dark);
    background:rgba(59,130,246,0.12); padding:4px 10px; border-radius:20px;
}
.oc-attach-preview-name { font-size:0.78rem; color:var(--text-sub); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-attach-preview-remove {
    border:none; background:rgba(239,68,68,0.12); color:var(--red-dark);
    width:28px; height:28px; border-radius:8px; cursor:pointer; font-weight:700;
}
.oc-attach-preview-media { max-height:120px; border-radius:12px; overflow:hidden; }
.oc-attach-preview-media img, .oc-attach-preview-media video { max-width:100%; max-height:120px; object-fit:contain; display:block; border-radius:12px; }
.oc-attach-preview-media audio { width:100%; }
.oc-attach-upload-bar { height:5px; background:var(--border); border-radius:6px; overflow:hidden; }
.oc-attach-upload-fill { height:100%; background:var(--blue); width:0; transition:width 0.2s; }
.oc-attach-preview.error { border-color:#fecaca; background:linear-gradient(135deg,#fef2f2,#fff7ed); }
.oc-attach-preview.sending { border-color:#bbf7d0; background:linear-gradient(135deg,#f0fdf4,#eff6ff); }
.oc-attach-status-err { font-size:0.72rem; color:var(--red-dark); margin-top:2px; }
.oc-msg-type-badge { font-size:0.68rem; font-weight:700; color:var(--text-sub); margin-bottom:6px; opacity:0.85; }
.oc-msg-actions { display:flex; gap:6px; margin-top:8px; opacity:1; flex-wrap:wrap; }
.oc-msg-act {
    width:34px; height:34px; min-width:34px; min-height:34px; padding:0; border:none; border-radius:10px;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.22); color:#fff; touch-action:manipulation;
    transition:background 0.15s, transform 0.1s;
}
.oc-msg-act:active { transform:scale(0.94); }
.oc-msg.other .oc-msg-act {
    background:var(--surface); color:var(--blue-dark); border:1px solid var(--border);
}
.oc-msg.other .oc-msg-act:hover { background:#eef2ff; }
.oc-msg.own .oc-msg-act:hover { background:rgba(255,255,255,0.34); }
.oc-msg-act.danger { color:#fecaca; }
.oc-msg.other .oc-msg-act.danger { color:var(--red-dark); background:#fef2f2; border-color:#fecaca; }
.oc-msg-act-ico { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.oc-msg-act svg { width:16px; height:16px; pointer-events:none; }
.oc-msg-act:disabled, .oc-msg-act.oc-msg-act-off { opacity:0.35; cursor:not-allowed; pointer-events:none; }

/* custom video player */
.oc-video-msg { min-width:220px; max-width:300px; }
.oc-video-shell {
    position:relative; border-radius:16px; overflow:hidden;
    background:linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
    box-shadow:0 4px 18px rgba(15,23,42,0.28);
}
.oc-video-el { display:block; width:100%; max-height:220px; background:#000; vertical-align:top; cursor:pointer; }
.oc-video-overlay {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.28); transition:opacity 0.2s; pointer-events:none;
}
.oc-video-overlay.hidden { opacity:0; pointer-events:none; }
.oc-video-loading {
    position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.45); pointer-events:none; z-index:2;
}
.oc-video-loading.active { display:flex; }
.oc-video-loading::after {
    content:''; width:28px; height:28px; border-radius:50%;
    border:3px solid rgba(255,255,255,0.25); border-top-color:#fff;
    animation:ocVideoSpin 0.75s linear infinite;
}
@keyframes ocVideoSpin { to { transform:rotate(360deg); } }
.oc-video-play-btn {
    width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; pointer-events:auto;
    background:rgba(255,255,255,0.92); color:var(--blue-dark);
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.25);
    transition:transform 0.15s;
}
.oc-video-play-btn:active { transform:scale(0.92); }
.oc-video-play-btn svg { width:22px; height:22px; fill:currentColor; stroke:none; margin-right:-2px; }
.oc-video-bar {
    display:flex; align-items:center; gap:8px; padding:8px 10px;
    background:linear-gradient(180deg, rgba(15,23,42,0.85), rgba(15,23,42,0.95)); color:#fff;
}
.oc-video-track {
    flex:1; height:5px; border-radius:5px; background:rgba(255,255,255,0.22); cursor:pointer; overflow:hidden; direction:ltr;
}
.oc-video-fill { height:100%; width:0; border-radius:5px; background:linear-gradient(90deg, var(--blue), #38bdf8); will-change:width; }
.oc-video-time { font-size:0.62rem; opacity:0.88; flex-shrink:0; font-variant-numeric:tabular-nums; direction:ltr; min-width:52px; white-space:nowrap; }
.oc-attach-menu {
    position:fixed; z-index:8500; min-width:240px;
    background:#fff; border:1px solid var(--border); border-radius:18px;
    box-shadow:0 16px 40px -10px rgba(15,23,42,0.28); padding:8px;
    display:flex; flex-direction:column; gap:2px;
}
.oc-attach-menu.hidden { display:none !important; }
.oc-attach-menu-title {
    font-size:0.72rem; font-weight:800; color:var(--text-muted);
    padding:8px 12px 10px; border-bottom:1px solid var(--border); margin-bottom:4px;
}
.oc-attach-menu-item {
    border:none; background:transparent; cursor:pointer; text-align:right;
    font-family:inherit; font-size:0.82rem; font-weight:700; color:var(--text-main);
    padding:10px 12px; border-radius:12px; transition:background .15s, color .15s;
    display:flex; align-items:center; gap:10px; width:100%;
}
.oc-attach-menu-item .oc-attach-menu-ico {
    width:34px; height:34px; border-radius:10px; background:var(--surface);
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--navy);
}
.oc-attach-menu-item .oc-attach-menu-ico svg { width:18px; height:18px; stroke:currentColor; fill:none; }
.oc-attach-menu-item .oc-attach-menu-label { flex:1; min-width:0; }
.oc-attach-menu-item:hover:not(:disabled):not(.disabled) { background:#f1f5f9; color:var(--blue-dark); }
.oc-attach-menu-item:hover:not(:disabled):not(.disabled) .oc-attach-menu-ico { background:#eef2ff; color:var(--blue-dark); }
.oc-attach-menu-item:disabled, .oc-attach-menu-item.disabled {
    opacity:0.42; cursor:not-allowed; color:var(--text-muted);
}
.oc-msg-actions { display:flex; gap:6px; margin-top:8px; opacity:1; flex-wrap:wrap; }
.oc-msg-reply-quote { font-size:0.72rem; color:var(--text-sub); border-right:3px solid var(--blue); padding:4px 8px; margin-bottom:6px; background:rgba(59,130,246,0.08); border-radius:8px; }
.oc-compose-bar { display:none; align-items:center; gap:8px; padding:8px 12px; margin-bottom:8px; background:#eff6ff; border-radius:12px; font-size:0.78rem; color:var(--blue-dark); }
.oc-compose-bar.active { display:flex; }
.oc-compose-bar button { border:none; background:transparent; cursor:pointer; font-weight:700; color:var(--red); }
.oc-panel-empty { text-align:center; padding:32px 16px; color:var(--text-muted); font-size:0.85rem; }
.oc-setting-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.82rem; }
.oc-setting-row:last-child { border-bottom:none; }

/* ---------- TEACHER CONTROL DOCK ---------- */
.oc-dock {
    display:flex; gap:8px; padding:8px 14px calc(8px + var(--oc-sab)); background:rgba(255,255,255,0.95);
    border-top:1px solid var(--border); overflow-x:auto; flex-shrink:0;
}
.oc-dock::-webkit-scrollbar { height:0; }
.oc-dock-btn {
    flex-shrink:0; border:none; cursor:pointer; padding:8px 14px; border-radius:14px;
    background:var(--surface); color:var(--text-sub); font-family:inherit; font-size:0.76rem; font-weight:700;
    display:flex; align-items:center; gap:6px; transition:all 0.2s; white-space:nowrap;
}
.oc-dock-btn svg { width:17px; height:17px; }
.oc-dock-btn:hover { background:var(--border); }
.oc-dock-btn.active { background:var(--navy); color:#fff; }
.oc-dock-btn.danger.active { background:var(--red); }
.oc-dock-btn.green.active { background:var(--green); }
.oc-dock-btn.oc-dock-locked { opacity:0.45; cursor:not-allowed !important; pointer-events:none; filter:grayscale(0.35); }
.oc-dock-btn.vcl-student-mic-blocked { box-shadow:0 0 0 2px rgba(239,68,68,0.65); }

/* ---------- PARTICIPANTS PANEL ---------- */
.oc-panel {
    position:absolute; top:0; bottom:0; left:0; width:300px; max-width:85%;
    background:#fff; box-shadow:var(--shadow-lg); z-index:40;
    transform:translateX(-105%); transition:transform 0.3s cubic-bezier(0.2,0.9,0.4,1.1);
    display:flex; flex-direction:column;
}
.oc-panel.open { transform:translateX(0); }
.oc-panel-header {
    padding:16px 18px; background:var(--surface); border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.oc-panel-title { font-size:0.95rem; font-weight:800; display:flex; align-items:center; gap:8px; }
.oc-panel-title svg { width:18px; height:18px; color:var(--blue); }
.oc-panel-close { background:none; border:none; cursor:pointer; font-size:1.3rem; color:var(--text-muted); }
.oc-panel-body { flex:1; overflow-y:auto; padding:10px; }
.oc-participant {
    display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px;
    transition:background 0.15s;
}
.oc-participant:hover { background:var(--surface); }
.oc-pt-avatar { width:40px; height:40px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.85rem; position:relative; }
.oc-pt-mic-state { position:absolute; bottom:-2px; left:-2px; width:18px; height:18px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; }
.oc-pt-mic-state svg { width:11px; height:11px; }
.oc-pt-info { flex:1; min-width:0; }
.oc-pt-name { font-size:0.85rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-pt-status { font-size:0.68rem; color:var(--text-muted); }
.oc-pt-status.speaking { color:var(--indigo); font-weight:700; }
.oc-pt-hand { color:var(--amber); animation:handWave 0.8s infinite; }
@keyframes handWave { 0%,100%{transform:rotate(-8deg);} 50%{transform:rotate(8deg);} }
.oc-pt-actions { display:flex; gap:4px; flex-shrink:0; align-items:center; }
.oc-pt-signal {
    flex-shrink:0; width:34px; height:34px; padding:0; border:none; border-radius:10px;
    background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:transform 0.12s, box-shadow 0.12s;
}
.oc-pt-signal:hover { transform:scale(1.06); box-shadow:0 2px 8px rgba(15,23,42,0.12); }
.oc-pt-signal:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.oc-signal-lights { display:flex; flex-direction:column; align-items:center; gap:3px; }
.oc-sig {
    display:block; width:8px; height:8px; border-radius:50%;
    background:#cbd5e1; opacity:0.35; box-shadow:inset 0 0 0 1px rgba(15,23,42,0.08);
}
.oc-pt-signal.oc-signal-green .oc-sig {
    background:#22c55e; opacity:1; box-shadow:0 0 0 1px rgba(34,197,94,0.45);
}
.oc-pt-signal.oc-signal-orange .oc-sig {
    background:#f97316; opacity:1; box-shadow:0 0 0 1px rgba(249,115,22,0.45);
}
.oc-pt-signal.oc-signal-red .oc-sig {
    background:#ef4444; opacity:1; box-shadow:0 0 0 1px rgba(239,68,68,0.45);
}
.oc-pt-signal.oc-signal-black .oc-sig {
    background:#1e293b; opacity:0.92; box-shadow:0 0 0 1px rgba(15,23,42,0.35);
}
.oc-student-conn-legend {
    margin:0 0 12px; padding:10px 12px; border-radius:12px; background:#f8fafc;
    border:1px solid var(--border); font-size:0.76rem; line-height:1.65; color:var(--text-sub);
}
.oc-student-conn-legend strong { color:var(--navy); font-weight:800; display:block; margin-bottom:6px; font-size:0.78rem; }
.oc-student-conn-legend span { display:flex; align-items:center; gap:8px; margin:4px 0; }
.oc-student-conn-legend i {
    flex-shrink:0; width:10px; height:10px; border-radius:50%; display:inline-block;
}
.oc-student-conn-legend .lg-black { background:#1e293b; }
.oc-student-conn-legend .lg-green { background:#22c55e; }
.oc-student-conn-legend .lg-orange { background:#f97316; }
.oc-student-conn-legend .lg-red { background:#ef4444; }
.oc-participant.is-speaking .oc-pt-name::after {
    content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%;
    background:var(--indigo); vertical-align:middle; animation:ocSpeakDot 1s ease-in-out infinite;
}
@keyframes ocSpeakDot { 0%,100%{opacity:0.35;} 50%{opacity:1;} }
.oc-pt-btn { width:30px; height:30px; border-radius:9px; border:none; cursor:pointer; background:var(--surface); color:var(--text-sub); display:flex; align-items:center; justify-content:center; }
.oc-pt-btn svg { width:14px; height:14px; }
.oc-pt-btn.muted { background:var(--red); color:#fff; }
.oc-pt-btn.mic-disabled { background:#e2e8f0; color:#94a3b8; cursor:not-allowed; opacity:0.72; }
.oc-pt-btn.mic-on { background:#22c55e; color:#fff; border:1.5px solid #15803d; box-shadow:0 0 0 1px rgba(34,197,94,0.25); }
.oc-pt-btn.mic-off { background:#ef4444; color:#fff; border:1.5px solid #b91c1c; box-shadow:0 0 0 1px rgba(239,68,68,0.2); }
.oc-pt-btn.wb-on { background:#dcfce7; color:#166534; border:1.5px solid #22c55e; }
.oc-pt-btn.wb-live { background:#ffedd5; color:#c2410c; border:1.5px solid #f97316; }
.oc-pt-btn.speaking { background:#eef2ff; color:#4338ca; border:1.5px solid #6366f1; }
.oc-participant.wb-pen-row { background:rgba(34,197,94,0.07); }
.oc-participant.wb-live-row { background:rgba(249,115,22,0.08); }
.oc-participant.speaking-row { background:rgba(99,102,241,0.06); }
.oc-panel-media-hint {
    margin:0; padding:8px 14px 10px; font-size:0.72rem; line-height:1.55; color:var(--text-sub);
    background:#f8fafc; border-bottom:1px solid var(--border);
}
.oc-panel-action { padding:12px 12px calc(12px + var(--oc-sab)); border-top:1px solid var(--border); }
.oc-mute-all-btn {
    width:100%; padding:11px; border-radius:14px; border:none; cursor:pointer;
    background:var(--navy); color:#fff; font-family:inherit; font-weight:700; font-size:0.84rem;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.oc-mute-all-btn.active { background:var(--green-dark); }
.oc-mute-all-btn svg { width:17px; height:17px; }

/* ---------- WHITEBOARD ---------- */
.oc-whiteboard {
    position:absolute; inset:0; z-index:35; background:#fff;
    display:none; flex-direction:column;
}
.oc-whiteboard.open { display:flex; }
.oc-wb-toolbar {
    display:flex; align-items:center; gap:6px; padding:8px 12px;
    background:var(--surface); border-bottom:1px solid var(--border);
    overflow-x:auto; flex-shrink:0;
}
.oc-wb-toolbar::-webkit-scrollbar { height:0; }
.oc-wb-tool {
    width:38px; height:38px; border-radius:11px; border:none; cursor:pointer; flex-shrink:0;
    background:#fff; color:var(--text-sub); display:flex; align-items:center; justify-content:center;
    transition:all 0.15s; border:1.5px solid transparent;
}
.oc-wb-tool svg { width:18px; height:18px; }
.oc-wb-tool.active { background:var(--navy); color:#fff; }
.oc-wb-color { width:28px; height:28px; border-radius:50%; cursor:pointer; flex-shrink:0; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--border); transition:transform 0.15s; }
.oc-wb-color.active { transform:scale(1.2); box-shadow:0 0 0 2px var(--navy); }
.oc-wb-sep { width:1px; height:26px; background:var(--border); flex-shrink:0; margin:0 4px; }
.oc-wb-size { width:80px; flex-shrink:0; }
.oc-wb-canvas-wrap { flex:1; overflow:hidden; position:relative; background:#fff; touch-action:none;
    background-image:radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size:22px 22px; }
#wbBgCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; touch-action:none; pointer-events:none; }
#wbCanvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; z-index:2; touch-action:none; }
#wbMagicCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:3; touch-action:none; pointer-events:none; }
.oc-wb-ai-btn {
    flex-shrink:0; border:none; cursor:pointer; padding:8px 16px; border-radius:11px;
    background:linear-gradient(95deg, var(--indigo), #4f46e5); color:#fff;
    font-family:inherit; font-weight:700; font-size:0.8rem;
    display:flex; align-items:center; gap:6px; transition:all 0.2s;
}
.oc-wb-ai-btn svg { width:16px; height:16px; }
.oc-wb-ai-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px -4px rgba(99,102,241,0.5); }
.oc-wb-close {
    flex-shrink:0; border:none; cursor:pointer; padding:7px 14px; border-radius:11px;
    background:var(--red); color:#fff; font-family:inherit; font-weight:700; font-size:0.78rem;
    display:flex; align-items:center; gap:6px;
}
.oc-wb-close svg { width:15px; height:15px; }
.oc-wb-live-btn { flex-shrink:0; border:1.5px solid var(--green); background:#ecfdf5; color:var(--green-dark); border-radius:10px; padding:0 12px; height:38px; font-family:inherit; font-weight:800; font-size:0.72rem; cursor:pointer; display:none; }
.oc-wb-live-btn.active { background:var(--green); color:#fff; border-color:var(--green); }
.oc-wb-exam-btn { flex-shrink:0; border:1.5px solid var(--blue); background:#eff6ff; color:var(--blue); border-radius:10px; padding:0 12px; height:38px; font-family:inherit; font-weight:800; font-size:0.72rem; cursor:pointer; display:none; }
.oc-wb-mode-badge { position:absolute; top:14px; left:14px; z-index:6; background:var(--navy); color:#fff; padding:7px 14px; border-radius:20px; font-size:0.74rem; font-weight:800; display:none; }
.oc-wb-mode-badge.show { display:block; }
.oc-wb-exam-submit { display:none; flex-shrink:0; border:none; background:var(--indigo); color:#fff; border-radius:10px; padding:0 14px; height:38px; font-family:inherit; font-weight:800; font-size:0.76rem; cursor:pointer; }
.oc-wb-exam-submit-bar {
    display:none; flex-shrink:0; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 16px calc(12px + var(--oc-sab));
    background:linear-gradient(135deg,#4338ca,#6366f1); color:#fff; border-top:3px solid #312e81;
}
.oc-wb-exam-submit-bar.show { display:flex; flex-wrap:wrap; }
.oc-wb-exam-submit-bar span { font-weight:700; font-size:0.86rem; flex:1; min-width:160px; }
.oc-wb-exam-submit-bar button {
    border:none; background:#fff; color:#4338ca; padding:14px 22px; border-radius:14px;
    font-family:inherit; font-weight:800; font-size:0.9rem; cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,0.2); min-height:48px;
}
body:not(.oc-is-teacher) .oc-wb-ai-btn { display:none !important; }
body:not(.oc-is-teacher) .oc-wb-tool[onclick="wbLoadBgImage()"] { display:none !important; }
body:not(.oc-is-teacher) #wbPdfBtn { display:none !important; }
.oc-wb-tool.oc-wb-pdf-btn {
    width:auto; min-width:44px; padding:0 10px; gap:4px;
    font-size:0.68rem; font-weight:800; letter-spacing:0.02em;
}
.oc-wb-tool.oc-wb-pdf-btn.active {
    background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff;
    box-shadow:0 4px 14px rgba(99,102,241,0.35);
}
.oc-wb-teacher-hint {
    display:none; flex-shrink:0; background:#f8fafc; border-bottom:1px solid var(--border);
    font-size:0.74rem; color:#475569; line-height:1.65;
}
.oc-wb-hint-toggle {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:7px 14px; border:none; background:transparent; cursor:pointer;
    font-family:inherit; font-size:0.76rem; font-weight:800; color:#334155; text-align:right;
}
.oc-wb-hint-toggle svg { width:16px; height:16px; flex-shrink:0; transition:transform 0.2s; stroke:#64748b; }
.oc-wb-hint-body { padding:0 14px 10px; display:none; }
.oc-wb-teacher-hint.open .oc-wb-hint-body { display:block; }
.oc-wb-teacher-hint.open .oc-wb-hint-toggle svg { transform:rotate(180deg); }
body.oc-is-teacher #ocWhiteboard.open .oc-wb-teacher-hint { display:block; }
body.oc-is-teacher #ocWhiteboard.open .oc-wb-live-btn,
body.oc-is-teacher #ocWhiteboard.open .oc-wb-exam-btn,
body.oc-is-teacher #ocWhiteboard.open #wbSendBtn { display:none !important; }
body.oc-is-teacher .oc-whiteboard.open .oc-wb-mobile-actions { display:flex; }
body.oc-is-teacher .oc-whiteboard.open .oc-wb-chat-fab.show {
    bottom:calc(72px + var(--oc-sab));
}
body.oc-is-teacher .oc-whiteboard.open.oc-wb-nav-visible .oc-wb-chat-fab.show {
    bottom:calc(132px + var(--oc-sab));
}
.oc-wb-mobile-actions {
    display:none; flex-shrink:0; gap:5px; padding:6px 8px calc(6px + var(--oc-sab));
    background:#fff; border-top:1px solid var(--border);
    flex-direction:row; flex-wrap:nowrap; align-items:stretch; justify-content:space-between;
}
.oc-wb-mobile-btn {
    flex:1; min-width:0; max-width:none; height:auto; min-height:50px; padding:5px 3px 4px;
    border:none; border-radius:10px; background:#f1f5f9; color:#334155; cursor:pointer;
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    transition:background 0.15s, color 0.15s; font-family:inherit;
}
.oc-wb-mobile-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; flex-shrink:0; pointer-events:none; }
.oc-wb-mobile-btn:active { transform:scale(0.97); }
.oc-wb-mobile-btn.active { background:var(--navy); color:#fff; }
.oc-wb-mobile-btn.active svg { stroke:#fff; }
.oc-wb-mobile-label {
    display:block; font-size:0.58rem; font-weight:800; line-height:1.2;
    text-align:center; max-width:100%; padding:0 1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.oc-wb-mobile-btn.oc-wb-mobile-students.active { background:#eef2ff; color:var(--indigo); border:1.5px solid var(--indigo); }
.oc-wb-exam-banner {
    display:none; margin:0 12px 8px; padding:14px 16px;
    background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%);
    border-radius:16px; color:#fff; align-items:center; gap:12px;
    box-shadow:0 8px 24px rgba(99,102,241,0.35);
}
.oc-wb-exam-banner.open { display:flex; flex-wrap:wrap; }
.oc-wb-exam-banner-text { flex:1; min-width:140px; font-weight:700; font-size:0.88rem; line-height:1.5; }
.oc-wb-exam-banner-btn {
    flex-shrink:0; border:none; background:#fff; color:#4338ca;
    padding:12px 18px; border-radius:12px; font-family:inherit;
    font-weight:800; font-size:0.85rem; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.oc-wb-live-banner {
    display:none; margin:0 12px 8px; padding:14px 16px;
    background:linear-gradient(135deg,#059669 0%,#10b981 100%);
    border-radius:16px; color:#fff; align-items:center; gap:12px;
    box-shadow:0 8px 24px rgba(16,185,129,0.35);
    animation:wbLiveBannerPulse 1.6s ease-in-out infinite;
}
.oc-wb-live-banner.open { display:flex; flex-wrap:wrap; }
.oc-wb-live-banner-text { flex:1; min-width:140px; font-weight:700; font-size:0.88rem; line-height:1.5; }
.oc-wb-live-banner-btn {
    flex-shrink:0; border:none; background:#fff; color:#047857;
    padding:12px 18px; border-radius:12px; font-family:inherit;
    font-weight:800; font-size:0.85rem; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
@keyframes wbLiveBannerPulse {
    0%, 100% { box-shadow:0 8px 24px rgba(16,185,129,0.35); }
    50% { box-shadow:0 8px 32px rgba(16,185,129,0.65), 0 0 0 3px rgba(255,255,255,0.35); }
}
.oc-wb-live-pulse-bar {
    position:absolute; left:0; right:0; bottom:0; height:6px; z-index:8;
    background:linear-gradient(90deg,#ef4444,#22c55e,#ef4444);
    background-size:200% 100%;
    opacity:0; pointer-events:none;
    animation:wbLiveBarBlink 1.2s linear infinite;
}
.oc-wb-live-pulse-bar.active { opacity:1; }
.oc-wb-pdf-nav {
    position:absolute; bottom:calc(12px + var(--oc-sab)); left:50%; transform:translateX(-50%); z-index:12;
    display:flex; align-items:center; gap:10px; padding:8px 14px;
    background:rgba(15,23,42,0.88); color:#fff; border-radius:999px;
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.oc-wb-pdf-nav.hidden { display:none !important; }
.oc-wb-pdf-nav button {
    border:none; background:rgba(255,255,255,0.15); color:#fff; width:32px; height:32px;
    border-radius:50%; cursor:pointer; font-size:0.9rem; font-weight:800;
}
.oc-wb-pdf-nav button:disabled { opacity:0.35; cursor:not-allowed; }
.oc-wb-pdf-nav span { font-size:0.78rem; font-weight:800; min-width:28px; text-align:center; white-space:nowrap; }
.oc-wb-pdf-nav input[type="number"] {
    width:52px; height:30px; border:none; border-radius:8px;
    background:rgba(255,255,255,0.95); color:var(--navy);
    font-family:inherit; font-size:0.78rem; font-weight:800;
    text-align:center; padding:0 4px;
}
.oc-wb-pdf-nav input[type="number"]::-webkit-outer-spin-button,
.oc-wb-pdf-nav input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.oc-wb-pdf-nav input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
.oc-wb-pdf-nav .oc-wb-pdf-pages { display:flex; align-items:center; gap:10px; }
.oc-wb-pdf-nav .oc-wb-pdf-pages.hidden { display:none !important; }
.oc-wb-pdf-nav .oc-wb-pdf-sep { width:1px; height:22px; background:rgba(255,255,255,0.22); flex-shrink:0; }
.oc-wb-pdf-nav .oc-wb-pdf-zoom { display:flex; align-items:center; gap:8px; }
.oc-wb-pdf-nav .oc-wb-pdf-zoom-label { font-size:0.72rem; font-weight:800; min-width:42px; text-align:center; }
.oc-wb-pdf-nav .oc-wb-pdf-zoom-btn { font-size:1.05rem; line-height:1; }
.oc-wb-pdf-nav .oc-wb-pdf-pan-btn.active { background:rgba(34,197,94,0.35); box-shadow:0 0 0 2px rgba(34,197,94,0.55); }
.oc-pen-mic-countdown-num {
    font-size:3rem; font-weight:900; color:var(--primary); line-height:1;
    margin:16px 0 8px; font-variant-numeric:tabular-nums;
}
@keyframes wbLiveBarBlink {
    0% { background-position:0% 50%; filter:brightness(1); }
    50% { background-position:100% 50%; filter:brightness(1.35); }
    100% { background-position:0% 50%; filter:brightness(1); }
}
.oc-wb-toolbar.oc-wb-readonly [data-tool],
.oc-wb-toolbar.oc-wb-readonly .oc-wb-color,
.oc-wb-toolbar.oc-wb-readonly .oc-wb-size,
.oc-wb-toolbar.oc-wb-readonly .oc-wb-tool[onclick*="wbUndo"],
.oc-wb-toolbar.oc-wb-readonly .oc-wb-tool[onclick*="wbClear"] { display:none !important; }
.oc-wb-students-toggle { flex-shrink:0; border:1.5px solid var(--indigo); background:#eef2ff; color:var(--indigo); border-radius:10px; padding:0 12px; height:38px; font-family:inherit; font-weight:800; font-size:0.72rem; cursor:pointer; display:none; align-items:center; gap:6px; white-space:nowrap; }
.oc-wb-students-toggle.active { background:var(--indigo); color:#fff; }
#wbStudentsDrawer { width:min(288px,88vw); }
.oc-wb-student-row {
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
    padding:10px 10px; border-radius:12px; background:#fff; border:1px solid var(--border);
}
.oc-wb-st-main { display:flex; align-items:center; gap:10px; min-width:0; }
.oc-wb-st-info { flex:1; min-width:0; overflow:hidden; }
.oc-wb-student-row .oc-wb-st-name {
    font-weight:700; font-size:0.8rem; line-height:1.35;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oc-wb-student-row .oc-wb-st-status { font-size:0.66rem; color:var(--text-muted); margin-top:2px; }
.oc-wb-st-actions {
    display:flex; flex-wrap:wrap; gap:5px; width:100%;
}
.oc-wb-st-btn {
    border:none; border-radius:8px; padding:7px 4px; font-family:inherit;
    font-weight:700; font-size:0.66rem; cursor:pointer; min-height:32px;
    line-height:1.2; text-align:center;
    flex:1 1 calc(33.333% - 4px); min-width:0;
}
.oc-wb-st-btn.pen, .oc-wb-st-btn.revoke { flex:1 1 calc(50% - 3px); }
.oc-wb-st-btn.pen { background:#dcfce7; color:#166534; }
.oc-wb-st-btn.revoke { background:#fee2e2; color:#991b1b; }
.oc-wb-st-btn.clear-draw { background:#f1f5f9; color:#475569; }
.oc-wb-st-btn.plus { background:#fef9c3; color:#854d0e; }
.oc-wb-st-btn.minus { background:#fee2e2; color:#991b1b; }
.oc-dock-btn.oc-dock-locked { opacity:0.45; cursor:not-allowed !important; pointer-events:none; filter:grayscale(0.35); }
.oc-dock-btn.vcl-student-mic-blocked { box-shadow:0 0 0 2px rgba(239,68,68,0.65); }
.oc-wb-chat-fab {
    position:absolute; right:18px; bottom:calc(18px + var(--oc-sab)); z-index:25;
    width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
    background:linear-gradient(135deg,#2563eb,#4338ca); color:#fff;
    box-shadow:0 8px 24px rgba(37,99,235,0.45);
    display:none; align-items:center; justify-content:center;
    transition:bottom 0.2s ease;
}
.oc-wb-chat-fab.show { display:flex; }
.oc-whiteboard.open .oc-wb-exam-submit-bar.show ~ .oc-wb-chat-fab.show {
    bottom:calc(72px + var(--oc-sab));
}
.oc-whiteboard.open .oc-wb-chat-fab.show {
    bottom:calc(18px + var(--oc-sab));
}
.oc-whiteboard.open.oc-wb-nav-visible .oc-wb-chat-fab.show {
    bottom:calc(68px + var(--oc-sab));
}
.oc-wb-chat-fab svg { width:26px; height:26px; }
.oc-wb-chat-badge {
    position:absolute; top:4px; right:4px; width:12px; height:12px; border-radius:50%;
    background:#ef4444; border:2px solid #fff; display:none;
}
.oc-wb-chat-badge.show { display:block; }
.oc-wb-chat-panel {
    position:absolute; left:0; right:0; bottom:0; z-index:24;
    max-height:min(72vh, 520px); background:#fff;
    border-top:2px solid var(--border);
    box-shadow:0 -12px 40px rgba(15,23,42,0.18);
    display:none; flex-direction:column;
    border-radius:18px 18px 0 0;
}
.oc-wb-chat-panel.open { display:flex; }
.oc-wb-chat-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid var(--border);
    font-weight:800; font-size:0.88rem; flex-shrink:0;
}
.oc-wb-chat-head button { border:none; background:none; cursor:pointer; font-size:1.1rem; color:var(--text-muted); }
.oc-wb-chat-msgs {
    flex:1; overflow-y:auto; padding:12px 14px;
    background:linear-gradient(180deg,#f8fafc,#fff);
}
.oc-wb-chat-msgs .oc-msg { margin-bottom:10px; }
.oc-wb-chat-empty {
    text-align:center; padding:24px 16px; color:var(--text-muted);
    font-size:0.84rem; font-weight:600; line-height:1.6;
}
.oc-wb-chat-inputbar {
    display:flex; align-items:flex-end; gap:8px; padding:10px 12px calc(10px + var(--oc-sab));
    border-top:1px solid var(--border); background:var(--surface); flex-shrink:0;
}
.oc-wb-chat-inputbar .oc-text-input { flex:1; min-height:42px; max-height:100px; }
.oc-wb-chat-react {
    display:flex; gap:8px; padding:0 12px 10px; flex-shrink:0; flex-wrap:wrap;
    background:var(--surface);
}
.oc-wb-chat-react button {
    border:1px solid var(--border); background:#fff; border-radius:10px;
    padding:6px 10px; font-size:1.1rem; cursor:pointer;
}
.oc-dock-btn.oc-wb-live-blink { animation:wbDockBlink 1.3s ease-in-out infinite; box-shadow:0 0 0 2px rgba(34,197,94,0.5); }
@keyframes wbDockBlink {
    0%, 100% { background:#ecfdf5; color:var(--green-dark); }
    50% { background:var(--green); color:#fff; }
}
.oc-feedback-layer { position:fixed; inset:0; pointer-events:none; z-index:120; overflow:hidden; }
.oc-fb-star { position:absolute; font-size:1.8rem; animation:fbStarFall 5s ease-in forwards; text-shadow:0 2px 8px rgba(250,204,21,0.6); }
@keyframes fbStarFall {
    0% { transform:translateY(-80px) rotate(0deg) scale(0.4); opacity:0; }
    8% { opacity:1; }
    85% { opacity:1; }
    100% { transform:translateY(110vh) rotate(720deg) scale(1.1); opacity:0; }
}
.oc-fb-positive-banner {
    position:absolute; left:50%; top:18%; transform:translateX(-50%);
    z-index:2; text-align:center; animation:fbPositiveBanner 5s ease-out forwards;
    max-width:min(92vw, 420px); padding:0 12px;
}
.oc-fb-positive-banner-inner {
    display:inline-flex; flex-direction:column; align-items:center; gap:8px;
    padding:16px 22px; border-radius:20px;
    background:linear-gradient(135deg, rgba(255,251,235,0.97), rgba(254,243,199,0.98));
    border:2px solid rgba(251,191,36,0.55);
    box-shadow:0 16px 48px rgba(245,158,11,0.28), 0 0 0 1px rgba(255,255,255,0.6) inset;
    backdrop-filter:blur(8px);
}
.oc-fb-positive-banner-ico { font-size:2.2rem; line-height:1; animation:fbPositivePulse 1.2s ease-in-out infinite; }
.oc-fb-positive-banner-name { font-size:1.15rem; font-weight:900; color:#92400e; line-height:1.45; }
.oc-fb-positive-banner-sub { font-size:0.82rem; font-weight:700; color:#b45309; opacity:0.9; }
@keyframes fbPositiveBanner {
    0% { opacity:0; transform:translateX(-50%) translateY(-16px) scale(0.88); }
    10% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
    82% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
    100% { opacity:0; transform:translateX(-50%) translateY(-10px) scale(0.96); }
}
@keyframes fbPositivePulse {
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.12); }
}
.oc-fb-sad-wrap { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); text-align:center; animation:fbSadPop 5s ease-out forwards; }
.oc-fb-sad-char { font-size:5rem; display:block; animation:fbSadShake 0.5s ease-in-out 6; }
.oc-fb-sad-label { margin-top:8px; font-size:1.1rem; font-weight:800; color:#991b1b; text-shadow:0 2px 12px rgba(255,255,255,0.9); max-width:min(88vw, 360px); line-height:1.5; }
@keyframes fbSadPop {
    0% { transform:translate(-50%,-50%) scale(0.2); opacity:0; }
    12% { transform:translate(-50%,-50%) scale(1.08); opacity:1; }
    82% { opacity:1; transform:translate(-50%,-50%) scale(1); }
    100% { transform:translate(-50%,-30%) scale(0.92); opacity:0; }
}
@keyframes fbSadShake {
    0%, 100% { transform:rotate(0deg); }
    25% { transform:rotate(-12deg); }
    75% { transform:rotate(12deg); }
}
.oc-fb-score-wrap {
    position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); text-align:center;
    animation:fbScorePop 5s ease-out forwards;
    padding:22px 28px 20px; border-radius:24px;
    background:linear-gradient(145deg, rgba(238,242,255,0.98), rgba(224,231,255,0.96));
    border:2px solid rgba(99,102,241,0.35);
    box-shadow:0 20px 50px rgba(99,102,241,0.25);
    min-width:min(78vw, 300px);
}
.oc-fb-score-headline {
    font-size:1.12rem; font-weight:900; color:#312e81; line-height:1.55; margin-bottom:8px;
}
.oc-fb-score-headline em { font-style:normal; color:#4338ca; font-size:1.35rem; }
.oc-fb-score-num { font-size:3rem; font-weight:900; color:#4338ca; text-shadow:0 4px 24px rgba(99,102,241,0.35); line-height:1; margin:4px 0 8px; }
.oc-fb-score-label { font-size:0.88rem; font-weight:600; color:#4338ca; margin-top:4px; line-height:1.65; opacity:0.92; }
@keyframes fbScorePop {
    0% { transform:translate(-50%,-50%) scale(0.3); opacity:0; }
    12% { transform:translate(-50%,-50%) scale(1.12); opacity:1; }
    82% { opacity:1; transform:translate(-50%,-50%) scale(1); }
    100% { transform:translate(-50%,-60%) scale(0.96); opacity:0; }
}
/* feedback cards in chat */
.oc-fb-chat-announce {
    align-self:center; width:min(94%, 380px);
    animation:fbChatCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.oc-fb-chat-announce-inner {
    display:flex; align-items:center; gap:12px; padding:12px 16px;
    border-radius:18px; min-height:72px;
    background:linear-gradient(135deg, #fffbeb 0%, #fef3c7 55%, #fde68a 100%);
    border:2px solid rgba(251,191,36,0.42);
    box-shadow:0 10px 28px rgba(245,158,11,0.16), inset 0 1px 0 rgba(255,255,255,0.65);
}
.oc-fb-chat-announce-art { width:52px; height:52px; flex-shrink:0; }
.oc-fb-chat-announce-art svg { width:100%; height:100%; display:block; }
.oc-fb-chat-announce-text { flex:1; min-width:0; }
.oc-fb-chat-announce-title { font-size:0.86rem; font-weight:900; color:#92400e; line-height:1.45; }
.oc-fb-chat-announce-sub { font-size:0.74rem; font-weight:700; color:#b45309; margin-top:2px; opacity:0.92; }
.oc-fb-chat-card {
    align-self:center; width:min(94%, 380px); min-height:118px;
    flex-shrink:0;
    display:flex; align-items:stretch; gap:0; padding:0;
    border-radius:20px; overflow:hidden;
    animation:fbChatCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:0 12px 36px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.55);
    border:2px solid transparent;
}
@keyframes fbChatCardIn {
    from { opacity:0; transform:translateY(16px) scale(0.94); }
    to { opacity:1; transform:translateY(0) scale(1); }
}
.oc-fb-chat-card.positive {
    background:linear-gradient(145deg, #fffbeb 0%, #fef3c7 48%, #fde68a 100%);
    border-color:rgba(251,191,36,0.45);
    flex-direction:column;
    align-items:stretch;
}
.oc-fb-chat-card.negative {
    background:linear-gradient(145deg, #fff1f2 0%, #ffe4e6 50%, #fecdd3 100%);
    border-color:rgba(244,63,94,0.28);
    flex-direction:column;
    align-items:stretch;
}
.oc-fb-chat-card.score {
    background:linear-gradient(145deg, #eef2ff 0%, #e0e7ff 52%, #c7d2fe 100%);
    border-color:rgba(99,102,241,0.35);
    flex-direction:column;
    align-items:stretch;
}
.oc-fb-chat-card.positive.expanded,
.oc-fb-chat-card.negative.expanded,
.oc-fb-chat-card.score.expanded {
    overflow:visible;
    min-height:118px;
}
.oc-fb-chat-art {
    width:96px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    padding:12px 8px; position:relative;
}
.oc-fb-chat-card.positive .oc-fb-chat-art { background:rgba(255,255,255,0.35); }
.oc-fb-chat-card.negative .oc-fb-chat-art { background:rgba(255,255,255,0.38); }
.oc-fb-chat-card.score .oc-fb-chat-art { background:rgba(255,255,255,0.4); }
.oc-fb-chat-art svg { width:72px; height:72px; display:block; filter:drop-shadow(0 4px 8px rgba(15,23,42,0.08)); }
.oc-fb-chat-main {
    flex:1; min-width:0; display:flex; flex-direction:column; justify:center;
    padding:14px 14px 14px 4px; gap:4px;
}
.oc-fb-chat-kicker {
    font-size:0.68rem; font-weight:800; letter-spacing:0.02em; opacity:0.85;
}
.oc-fb-chat-card.positive .oc-fb-chat-kicker { color:#b45309; }
.oc-fb-chat-card.negative .oc-fb-chat-kicker { color:#be123c; }
.oc-fb-chat-card.score .oc-fb-chat-kicker { color:#4338ca; }
.oc-fb-chat-title { font-size:0.92rem; font-weight:900; line-height:1.45; }
.oc-fb-chat-card.positive .oc-fb-chat-title { color:#92400e; }
.oc-fb-chat-card.negative .oc-fb-chat-title { color:#9f1239; }
.oc-fb-chat-card.score .oc-fb-chat-title { color:#312e81; }
.oc-fb-chat-desc {
    font-size:0.78rem; font-weight:600; line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.oc-fb-chat-card.positive .oc-fb-chat-desc { color:#a16207; }
.oc-fb-chat-card.negative .oc-fb-chat-desc { color:#be123c; }
.oc-fb-chat-card.score .oc-fb-chat-desc { color:#4338ca; }
.oc-fb-chat-score-num {
    font-size:2rem; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums;
    letter-spacing:-0.02em; margin:2px 0;
}
.oc-fb-chat-card.score .oc-fb-chat-score-num { color:#4338ca; text-shadow:0 2px 12px rgba(99,102,241,0.25); }
.oc-fb-chat-chip {
    align-self:flex-start; margin-top:4px; padding:3px 10px; border-radius:999px;
    font-size:0.68rem; font-weight:800;
}
.oc-fb-chat-card.positive .oc-fb-chat-chip { background:#f59e0b; color:#fff; }
.oc-fb-chat-card.negative .oc-fb-chat-chip { background:#e11d48; color:#fff; }
.oc-fb-chat-card.score .oc-fb-chat-chip { background:#6366f1; color:#fff; }
.oc-fb-chat-card.has-note { cursor:pointer; transition:box-shadow 0.2s ease, transform 0.15s ease; }
.oc-fb-chat-card.positive.has-note:hover { box-shadow:0 10px 28px rgba(245,158,11,0.22); }
.oc-fb-chat-card.negative.has-note:hover { box-shadow:0 10px 28px rgba(225,29,72,0.18); }
.oc-fb-chat-card.score.has-note:hover { box-shadow:0 10px 28px rgba(99,102,241,0.22); }
.oc-fb-chat-card.has-note:active { transform:scale(0.995); }
.oc-fb-chat-top { display:flex; align-items:stretch; width:100%; flex-shrink:0; }
.oc-fb-chat-expand-hint {
    align-self:flex-start; margin-top:6px; font-size:0.68rem; font-weight:700;
    opacity:0.88; display:inline-flex; align-items:center; gap:4px;
}
.oc-fb-chat-card.positive .oc-fb-chat-expand-hint { color:#b45309; }
.oc-fb-chat-card.negative .oc-fb-chat-expand-hint { color:#be123c; }
.oc-fb-chat-card.score .oc-fb-chat-expand-hint { color:#6366f1; }
.oc-fb-chat-expand-hint svg {
    width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2;
    transition:transform 0.2s ease;
}
.oc-fb-chat-card.expanded .oc-fb-chat-expand-hint svg { transform:rotate(180deg); }
.oc-fb-chat-note-panel {
    display:none; width:100%; flex-shrink:0;
    padding:0 14px 14px; box-sizing:border-box;
    border-top:1px solid rgba(99,102,241,0.15);
    background:linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.15));
}
.oc-fb-chat-card.positive .oc-fb-chat-note-panel {
    border-top-color:rgba(251,191,36,0.28);
    background:linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,251,235,0.2));
}
.oc-fb-chat-card.negative .oc-fb-chat-note-panel {
    border-top-color:rgba(244,63,94,0.22);
    background:linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,241,242,0.2));
}
.oc-fb-chat-card.expanded .oc-fb-chat-note-panel { display:block; animation:fbNoteFade 0.22s ease; }
@keyframes fbNoteFade { from{opacity:0;} to{opacity:1;} }
.oc-fb-chat-note-label {
    margin-top:8px; font-size:0.64rem; font-weight:800; opacity:0.85;
}
.oc-fb-chat-card.positive .oc-fb-chat-note-label { color:#b45309; }
.oc-fb-chat-card.negative .oc-fb-chat-note-label { color:#be123c; }
.oc-fb-chat-card.score .oc-fb-chat-note-label { color:#6366f1; }
.oc-fb-chat-teacher-note {
    margin-top:4px; padding:0 2px 2px;
    font-size:0.74rem; font-weight:400; line-height:1.8; color:#475569;
    white-space:pre-wrap; word-break:break-word;
}

.vcex-wb-exam-row { flex-direction:column !important; align-items:stretch !important; cursor:default !important; padding-bottom:12px !important; }
.vcex-wb-exam-row-main { display:flex; align-items:center; gap:10px; width:100%; }
.vcex-wb-exam-thumb { width:56px; height:42px; border-radius:8px; object-fit:cover; background:#e2e8f0; flex-shrink:0; border:1px solid var(--border); cursor:pointer; transition:transform 0.15s ease, box-shadow 0.15s ease; }
.vcex-wb-exam-thumb:hover { transform:scale(1.04); box-shadow:0 4px 14px rgba(0,0,0,0.12); }
.vcex-wb-exam-preview-wrap {
    position:relative; margin-top:10px; width:100%; border-radius:12px; overflow:hidden;
    border:2px solid var(--border); background:#fff; cursor:zoom-in;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.vcex-wb-exam-preview-wrap:hover { border-color:#6366f1; box-shadow:0 6px 24px rgba(99,102,241,0.18); }
.vcex-wb-exam-preview {
    display:block; width:100%; max-height:280px; object-fit:contain; background:#f8fafc;
}
.vcex-wb-exam-preview-hint {
    display:block; text-align:center; padding:8px 10px; font-size:0.74rem; font-weight:700;
    color:#4338ca; background:linear-gradient(180deg,#eef2ff,#e0e7ff);
}
.vcex-wb-grade-preview {
    position:relative; margin-bottom:14px; border:2px solid var(--border); border-radius:14px;
    overflow:hidden; background:#fff; cursor:zoom-in;
}
.vcex-wb-grade-preview:hover { border-color:#6366f1; }
.vcex-wb-grade-preview img {
    display:block; width:100%; max-height:min(52vh, 520px); object-fit:contain; background:#f8fafc;
}
.vcex-wb-grade-preview .vcex-wb-exam-preview-hint { font-size:0.78rem; padding:10px; }
#ocWbExamReportModal .oc-modal { max-width:min(720px, 96vw); }
#ocWbExamGradeModal .oc-modal { max-width:min(960px, 96vw); }
.oc-wb-exam-confirm-modal .oc-modal { max-width:420px; text-align:center; }
.oc-wb-publish-modal { max-width:400px; text-align:center; overflow:hidden; }
.oc-wb-publish-hero {
    padding:22px 20px 18px; background:linear-gradient(135deg,#4338ca 0%,#6366f1 55%,#0ea5e9 100%);
    color:#fff;
}
.oc-wb-publish-icon {
    width:56px; height:56px; margin:0 auto 12px; border-radius:18px;
    background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center;
}
.oc-wb-publish-icon svg { width:28px; height:28px; stroke:#fff; }
.oc-wb-publish-hero h3 { font-size:1.05rem; font-weight:800; margin:0 0 6px; }
.oc-wb-publish-hero p { font-size:0.82rem; opacity:0.92; margin:0; line-height:1.6; }
.oc-wb-publish-list {
    list-style:none; margin:0 0 18px; padding:0; text-align:right;
    font-size:0.84rem; color:var(--text-sub); line-height:1.75;
}
.oc-wb-publish-list li { padding:6px 0; border-bottom:1px solid #f1f5f9; }
.oc-wb-publish-list li:last-child { border-bottom:none; }
.oc-wb-publish-actions { display:flex; gap:10px; }
.oc-wb-publish-actions button {
    flex:1; min-height:46px; border:none; border-radius:14px;
    font-family:inherit; font-weight:800; font-size:0.88rem; cursor:pointer;
}
.oc-wb-publish-cancel { background:#f1f5f9; color:#334155; }
.oc-wb-publish-ok { background:linear-gradient(135deg,#6366f1,#4338ca); color:#fff; box-shadow:0 8px 20px rgba(99,102,241,0.35); }
.oc-wb-exam-confirm-modal p { margin:0 0 16px; font-size:0.92rem; line-height:1.7; color:var(--text-muted); }
.oc-wb-exam-confirm-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.oc-wb-exam-confirm-actions button { min-width:110px; min-height:44px; border-radius:12px; font-family:inherit; font-weight:800; cursor:pointer; border:none; padding:0 18px; }
.oc-wb-exam-confirm-yes { background:linear-gradient(135deg,#6366f1,#4338ca); color:#fff; }
.oc-wb-exam-confirm-no { background:#f1f5f9; color:#334155; }
.oc-wb-exam-confirm-skip { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:0.8rem; color:var(--text-muted); cursor:pointer; }
.oc-wb-exam-disc-ta { width:100%; min-height:90px; border:1.5px solid var(--border); border-radius:12px; padding:12px; font-family:inherit; font-size:0.88rem; resize:vertical; margin:12px 0; }
#ocWbExamConfirmModal, #ocWbExamDiscModal { z-index:10500; }

/* مودال‌ها، پیام‌ها و نوتیفیکیشن‌ها بالاتر از لایه ویدیو (تا ~10050) و تور (10850) */
.oc-modal-overlay,
#ocStudentConnModal,
#ocMediaStatusModal,
#ocWbExamConfirmModal,
#ocWbExamDiscModal { z-index:10500 !important; }
.oc-modal-overlay.open,
#ocPollModal.open,
#ocQuizModal.open,
#ocAiModal.open,
#ocNoteModal.open,
#ocNoteConfirmModal.open,
#ocQuizResultsModal.open,
#ocQuizStudentModal.open,
#ocQuizTakeOverlay.open { z-index:10960 !important; }
.oc-toast,
.oc-toast.show { z-index:10600 !important; }
.oc-attach-menu { z-index:10550 !important; }
.oc-context-menu { z-index:10550 !important; }
.jconfirm,
.jconfirm-box-container,
.jconfirm-holder { z-index:10700 !important; }
.vcex-wb-row-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; padding-right:4px; position:relative; z-index:2; }
.vcex-wb-act-btn { border:none; border-radius:10px; padding:9px 14px; font-family:inherit; font-weight:700; font-size:0.78rem; cursor:pointer; min-height:40px; }
.vcex-wb-act-btn.grade { background:var(--indigo); color:#fff; }
.vcex-wb-act-btn.plus { background:#dcfce7; color:#166534; }
.vcex-wb-act-btn.minus { background:#fee2e2; color:#991b1b; }
.vcex-wb-student-cta {
    margin-top:10px; padding:14px; border-radius:12px; background:linear-gradient(135deg,#0ea5e9,#6366f1);
    color:#fff; font-weight:800; font-size:0.88rem; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px;
}
@media (max-width:768px) {
    .oc-whiteboard.open .oc-wb-mobile-actions { display:flex; }
    .oc-whiteboard.open .oc-wb-chat-fab.show {
        right:14px; width:50px; height:50px;
        bottom:calc(82px + var(--oc-sab));
    }
    .oc-whiteboard.open.oc-wb-nav-visible .oc-wb-chat-fab.show {
        bottom:calc(142px + var(--oc-sab));
    }
    body.oc-is-teacher .oc-whiteboard.open .oc-wb-chat-fab.show {
        bottom:calc(82px + var(--oc-sab));
    }
    body.oc-is-teacher .oc-whiteboard.open.oc-wb-nav-visible .oc-wb-chat-fab.show {
        bottom:calc(142px + var(--oc-sab));
    }
    .oc-whiteboard.open .oc-wb-exam-submit-bar.show ~ .oc-wb-chat-fab.show {
        bottom:calc(78px + var(--oc-sab));
    }
    .oc-whiteboard.open.oc-wb-nav-visible .oc-wb-exam-submit-bar.show ~ .oc-wb-chat-fab.show {
        bottom:calc(138px + var(--oc-sab));
    }
    body.oc-is-teacher .oc-whiteboard.open .oc-wb-exam-submit-bar.show ~ .oc-wb-chat-fab.show {
        bottom:calc(82px + var(--oc-sab));
    }
    body.oc-is-teacher .oc-whiteboard.open.oc-wb-nav-visible .oc-wb-exam-submit-bar.show ~ .oc-wb-chat-fab.show {
        bottom:calc(142px + var(--oc-sab));
    }
    .oc-wb-live-btn, .oc-wb-exam-btn, .oc-wb-exam-submit { min-height:46px !important; font-size:0.82rem !important; padding:0 14px !important; }
    #wbStudentsToggle { display:none !important; }
    .oc-wb-tool { width:44px; height:44px; }
    .oc-wb-close { min-height:44px; font-size:0.82rem !important; }
    #wbSendBtn { min-height:44px !important; font-size:0.8rem !important; padding:0 14px !important; }
    .oc-dock-btn { min-width:48px; min-height:48px; padding:10px 13px !important; border-radius:14px; }
    .oc-dock-btn svg { width:22px; height:22px; }
    .oc-send-btn, .oc-mic-btn, .oc-attach-btn, .oc-emoji-btn { min-width:36px; min-height:36px; }
    .oc-msg-act { width:38px; height:38px; min-width:38px; min-height:38px; }
    .oc-file-btn { min-height:38px; padding:7px 12px; }
    .oc-attach-btn svg, .oc-emoji-btn svg, .oc-mic-btn svg, .oc-send-btn svg { width:18px; height:18px; }
    .oc-topbar { padding:calc(8px + var(--oc-sat)) calc(10px + var(--oc-sar)) 8px calc(10px + var(--oc-sal)); gap:8px; min-height:48px; }
    .oc-class-sub { display:none !important; }
    .oc-class-title { font-size:0.86rem; max-width:38vw; }
    .oc-topbar-online { display:inline-flex !important; }
    .oc-topbar-more { display:flex !important; }
    .oc-topbar-desktop-only { display:none !important; }
    .oc-start-stop-btn { padding:0 10px !important; min-width:40px !important; }
    #ocStartStopLabel { display:none; }
    .oc-back-btn { width:36px; height:36px; border-radius:12px; }
    .oc-media-antenna { width:22px; height:38px; }
    .oc-ant-svg { width:22px; height:38px; }
}
.oc-topbar-online {
    display:none; align-items:center; gap:5px; flex-shrink:0;
    background:rgba(255,255,255,0.14); padding:5px 10px; border-radius:20px;
    font-size:0.72rem; font-weight:800; white-space:nowrap;
}
body.oc-is-teacher .oc-topbar-online { cursor:pointer; transition:background 0.15s; pointer-events:auto; }
body.oc-is-teacher .oc-topbar-online:hover { background:rgba(255,255,255,0.22); }
body.oc-is-teacher .oc-topbar-online:active { transform:scale(0.97); }
body:not(.oc-is-teacher) .oc-topbar-more {
    opacity:0.55; pointer-events:none; cursor:default;
}
body:not(.oc-is-teacher) .oc-topbar-online {
    opacity:1; pointer-events:none; cursor:default;
}
body:not(.oc-is-teacher) #ocDate { display:none !important; }
body:not(.oc-is-teacher) .oc-topbar-menu-row.oc-menu-student-hidden { display:none; }
body.oc-is-student #studentPicDockBtn { display:none !important; }
body.oc-is-student .vcl-tv-teacher-only { display:none !important; }
body.oc-is-student .vcl-src-picker-screen { display:none !important; }
.oc-topbar-online svg { width:14px; height:14px; stroke:#fff; flex-shrink:0; }
.oc-topbar-more {
    display:none; width:36px; height:36px; border-radius:12px; border:none; cursor:pointer;
    background:rgba(255,255,255,0.12); color:#fff; align-items:center; justify-content:center; flex-shrink:0;
}
.oc-topbar-more svg { width:18px; height:18px; fill:#fff; stroke:none; }
.oc-topbar-menu-overlay {
    position:fixed; inset:0; z-index:45; background:rgba(15,23,42,0.4);
    backdrop-filter:blur(3px);
    display:none; align-items:flex-start; justify-content:flex-end; padding:calc(52px + var(--oc-sat, 0px)) 10px 10px;
}
.oc-topbar-menu-overlay.open { display:flex; }
.oc-topbar-menu {
    background:#fff; color:var(--text-main); border-radius:20px; min-width:min(300px, 92vw); max-width:min(92vw, 340px);
    box-shadow:0 20px 50px -12px rgba(15,23,42,0.35); overflow:hidden;
    animation:modalIn 0.22s ease; border:1px solid rgba(226,232,240,0.9);
}
.oc-topbar-menu-head {
    padding:14px 16px; background:linear-gradient(135deg, var(--navy) 0%, #1e293b 100%);
    color:#fff; border-bottom:none;
    font-size:0.88rem; font-weight:800;
}
.oc-topbar-menu-row {
    padding:12px 16px; font-size:0.82rem; color:var(--text-sub); border-bottom:1px solid #f1f5f9;
    display:flex; align-items:center; gap:10px; line-height:1.5;
}
.oc-topbar-menu-row:last-child { border-bottom:none; }
.oc-topbar-menu-row .oc-topbar-menu-ico {
    width:32px; height:32px; border-radius:10px; background:var(--surface);
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--navy);
}
.oc-topbar-menu-row .oc-topbar-menu-ico svg { width:16px; height:16px; stroke:currentColor; fill:none; }
.oc-topbar-menu-row .oc-topbar-menu-val { flex:1; min-width:0; font-weight:700; color:var(--text-main); }
.oc-topbar-menu-actions { padding:12px; display:flex; flex-wrap:wrap; gap:8px; background:var(--surface); border-top:1px solid var(--border); }
.oc-topbar-menu-actions .oc-back-btn { width:auto; height:36px; padding:0 12px; font-size:0.76rem; font-weight:800; gap:6px; background:var(--navy); color:#fff; border-radius:10px; }
/* AI drawing indicator on whiteboard */
.oc-wb-drawing-badge {
    position:absolute; top:14px; right:14px; z-index:5;
    background:linear-gradient(95deg, var(--indigo), #4f46e5); color:#fff;
    padding:8px 16px; border-radius:30px; font-size:0.8rem; font-weight:700;
    display:none; align-items:center; gap:8px; box-shadow:var(--shadow-md);
}
.oc-wb-drawing-badge.show { display:flex; }
.oc-wb-drawing-badge .loading-spinner { width:14px; height:14px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:spin 0.6s linear infinite; }

/* ---------- TOAST / REACTIONS ---------- */
.oc-reactions-layer { position:absolute; inset:0; pointer-events:none; z-index:50; overflow:hidden; }
.oc-float-emoji { position:absolute; font-size:2rem; animation:floatUp 2.4s ease-out forwards; }
@keyframes floatUp { 0%{transform:translateY(0) scale(0.5); opacity:0;} 15%{opacity:1; transform:translateY(-20px) scale(1.1);} 100%{transform:translateY(-280px) scale(0.9); opacity:0;} }

.oc-conn-overlay { display:none !important; }
/* نوار اتصال — داخل لایه صفحه (نه روی چت) */
.oc-media-conn {
    flex-shrink:0; z-index:25; width:100%; pointer-events:none;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height 0.32s ease, opacity 0.28s ease;
}
.oc-media-conn:not(.hidden) { max-height:52px; opacity:1; }
.oc-media-conn.hidden { max-height:0; opacity:0; pointer-events:none; }
.oc-media-conn-inner {
    display:flex; align-items:center; gap:10px;
    padding:8px 16px;
    background:linear-gradient(135deg,#f8fafc,#eef2ff);
    color:var(--navy);
    border-bottom:1px solid rgba(148,163,184,0.35); direction:rtl;
}
.oc-media-conn-spin {
    width:18px; height:18px; flex-shrink:0;
    border:2px solid rgba(59,130,246,0.2); border-top-color:var(--blue);
    border-radius:50%; animation:spin 0.75s linear infinite;
}
.oc-media-conn.oc-media-conn-err .oc-media-conn-inner {
    background:linear-gradient(135deg,#fff7ed,#fef2f2);
    border-bottom-color:rgba(239,68,68,0.25);
}
.oc-media-conn.oc-media-conn-wait .oc-media-conn-inner {
    background:linear-gradient(135deg,#fffbeb,#fef3c7);
    border-bottom-color:rgba(245,158,11,0.28);
}
.oc-media-conn.oc-media-conn-wait .oc-media-conn-spin {
    border-top-color:#f59e0b; border-color:rgba(245,158,11,0.22);
}
.oc-media-conn.oc-media-conn-err .oc-media-conn-spin { display:none; }
.oc-media-conn-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.oc-media-conn-label { font-size:0.76rem; font-weight:800; line-height:1.45; color:var(--navy); }
.oc-media-conn-sub { font-size:0.66rem; color:var(--text-sub); line-height:1.35; }
.oc-media-conn-track {
    display:none;
}
.oc-media-conn-retry {
    pointer-events:auto; border:none; border-radius:10px; padding:7px 12px;
    background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff;
    font-family:inherit; font-size:0.68rem; font-weight:800; cursor:pointer;
    box-shadow:0 4px 12px rgba(37,99,235,0.28); white-space:nowrap; flex-shrink:0;
}
.oc-media-conn-retry:hover { filter:brightness(1.06); }

.oc-app-conn-banner {
    display:none; position:fixed; left:12px; right:12px; bottom:calc(var(--oc-bottom-chrome-h, 72px) + 12px); z-index:120;
    padding:10px 14px; border-radius:14px; background:linear-gradient(135deg,#fef3c7,#fde68a);
    border:1.5px solid #f59e0b; box-shadow:0 8px 24px rgba(245,158,11,0.25);
    align-items:center; justify-content:space-between; gap:10px;
}
.oc-app-conn-banner.open { display:flex; }
.oc-app-conn-banner-text { font-size:0.78rem; font-weight:800; color:#92400e; line-height:1.5; flex:1; }
.oc-app-conn-banner-btn {
    border:none; cursor:pointer; padding:8px 12px; border-radius:10px;
    background:#92400e; color:#fff; font-family:inherit; font-weight:700; font-size:0.72rem; white-space:nowrap;
}
.oc-media-conn-retry.hidden { display:none; }
/* MediaSoup status modal */
.oc-media-status-modal { max-width:380px; }
.oc-media-status-hero {
    padding:22px 20px 18px; text-align:center;
    background:linear-gradient(160deg,#0f172a 0%,#1e3a5f 55%,#2563eb 100%);
    color:#fff;
}
.oc-media-status-antenna {
    width:72px; height:110px; margin:0 auto 12px; display:block;
}
.oc-media-status-antenna .oc-ant-pole { stroke:rgba(255,255,255,0.9); stroke-width:2.5; }
.oc-media-status-antenna .oc-ant-tip,
.oc-media-status-antenna .oc-ant-base { fill:rgba(255,255,255,0.9); }
.oc-media-status-antenna .oc-ant-bar { stroke:rgba(255,255,255,0.25); stroke-width:3; }
.oc-media-status-antenna.q-1 .oc-ant-bar.lit { stroke:#ef4444; }
.oc-media-status-antenna.q-2 .oc-ant-bar.lit { stroke:#f59e0b; }
.oc-media-status-antenna.q-3 .oc-ant-bar.lit { stroke:#84cc16; }
.oc-media-status-antenna.q-4 .oc-ant-bar.lit { stroke:#22c55e; }
.oc-media-status-antenna.is-disconnected .oc-ant-x { opacity:1; }
.oc-media-status-antenna.is-disconnected .oc-ant-bar.lit { stroke:rgba(255,255,255,0.15); opacity:0.3; }
.oc-media-status-antenna.is-connecting .oc-ant-bar-1 { stroke:#f59e0b; animation:ocAntPulse 1.1s ease-in-out infinite; }
.oc-media-status-title { font-size:1rem; font-weight:800; margin:0 0 4px; }
.oc-media-status-sub { font-size:0.78rem; opacity:0.9; margin:0; line-height:1.6; }
.oc-media-status-fill-wrap { margin:14px 0 10px; }
.oc-media-status-fill-track {
    height:10px; border-radius:999px; background:#e2e8f0; overflow:hidden;
}
.oc-media-status-fill-bar {
    height:100%; width:0%; border-radius:999px;
    background:linear-gradient(90deg,#ef4444,#f59e0b,#84cc16,#22c55e);
    transition:width 0.45s ease;
}
.oc-media-status-fill-label {
    display:flex; justify-content:space-between; margin-top:6px;
    font-size:0.68rem; font-weight:700; color:var(--text-muted);
}
.oc-media-status-details {
    list-style:none; margin:0; padding:0; text-align:right;
}
.oc-media-status-details li {
    padding:9px 0; border-bottom:1px solid #f1f5f9;
    font-size:0.8rem; line-height:1.55; color:var(--text-sub);
}
.oc-media-status-details li:last-child { border-bottom:none; }
.oc-media-status-details strong { color:var(--navy); font-weight:800; }
.oc-media-status-actions { display:flex; gap:8px; margin-top:14px; }
.oc-media-status-actions button {
    flex:1; border:none; border-radius:12px; padding:11px 14px;
    font-family:inherit; font-weight:800; font-size:0.82rem; cursor:pointer;
}
.oc-media-status-close { background:#f1f5f9; color:#334155; }
.oc-media-status-retry { background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; }
#wbMobileExamBtn .oc-wb-mobile-label,
#wbMobileSendBtn .oc-wb-mobile-label {
    white-space:normal; font-size:0.52rem; line-height:1.15; max-height:2.5em; overflow:hidden;
}
@media (max-width:600px){
    .oc-media-conn-sub { display:none; }
}
@keyframes spin { to { transform:rotate(360deg); } }

.oc-toast {
    position:fixed; bottom:calc(var(--oc-bottom-chrome-h, 90px) + 8px); left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--navy); color:#fff; padding:10px 20px; border-radius:30px;
    font-size:0.82rem; font-weight:700; box-shadow:var(--shadow-lg);
    opacity:0; transition:all 0.3s; z-index:10200; pointer-events:none; white-space:nowrap; max-width:min(92vw,420px); text-align:center; white-space:normal;
}
.oc-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* poll mini */
.oc-poll-card {
    align-self:center; width:min(90%, calc(100vw - 48px)); max-width:420px; background:#fff;
    border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:var(--shadow-sm);
    box-sizing:border-box; overflow:hidden;
}
.oc-poll-q { font-size:0.9rem; font-weight:800; margin-bottom:12px; }
.oc-poll-opt {
    position:relative; padding:10px 14px; border-radius:12px; background:var(--surface);
    margin-bottom:8px; cursor:pointer; font-size:0.84rem; font-weight:600; overflow:hidden;
    border:1.5px solid transparent; transition:all 0.15s;
}
.oc-poll-opt:hover { border-color:var(--blue); }
.oc-poll-bar { position:absolute; top:0; right:0; bottom:0; background:rgba(59,130,246,0.15); width:0; transition:width 0.5s; }
.oc-poll-opt span { position:relative; z-index:1; }
.oc-poll-pct { position:relative; z-index:1; float:left; font-weight:800; color:var(--blue-dark); }

/* reaction quick bar */
.oc-react-bar {
    position:absolute; bottom:calc(var(--oc-bottom-chrome-h, 120px) + 16px); left:50%; transform:translateX(-50%) scale(0.8);
    display:none; gap:6px; background:#fff; padding:8px 12px; border-radius:30px;
    box-shadow:var(--shadow-lg); z-index:45;
}
.oc-react-bar.open { display:flex; animation:reactBarIn 0.2s ease forwards; }
@keyframes reactBarIn { to{transform:translateX(-50%) scale(1);} }
.oc-react-bar span { font-size:1.5rem; cursor:pointer; transition:transform 0.15s; }
.oc-react-bar span:hover { transform:scale(1.3); }

/* lightbox */
.oc-lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:9000; display:none; flex-direction:column; align-items:center; justify-content:center; padding:20px; overflow:hidden; }
.oc-lightbox.open { display:flex; }
.oc-lightbox-stage {
    flex:1; display:flex; align-items:center; justify-content:center; width:100%; overflow:auto;
    touch-action:pan-x pan-y;
}
.oc-lightbox-stage img { max-width:100%; max-height:100%; border-radius:14px; transition:transform 0.15s ease; transform-origin:center center; }
.oc-lightbox-stage.oc-lightbox-wb { background:#fff; border-radius:14px; padding:8px; }
.oc-lightbox-dl {
    position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,0.2); color:#fff; border:none; cursor:pointer; font-size:1.1rem; z-index:9005;
}
.oc-lightbox-close { position:absolute; top:18px; left:18px; width:42px; height:42px; border-radius:50%; background:rgba(15,23,42,0.72); color:#fff; border:none; cursor:pointer; font-size:1.4rem; z-index:9005; line-height:1; }
body.oc-archive-view #ocMediaConn { display:none !important; }
body.oc-archive-view #ocStartStopBtn,
body.oc-archive-view #ocStartClassPrompt { display:none !important; }

/* دمو عمومی (بدون سرور کلاس) */
html.oc-live-demo body.oc-live-demo,
body.oc-live-demo {
    --oc-demo-bar-h: 40px;
}
body.oc-live-demo .oc-live-demo-bar {
    display: flex;
}
body.oc-live-demo .oc-layout {
    height: calc(var(--oc-vh) - var(--oc-demo-bar-h));
    max-height: calc(var(--oc-vh) - var(--oc-demo-bar-h));
}
body.oc-live-demo #ocStartClassPrompt,
body.oc-live-demo #ocAppConnBanner,
body.oc-live-demo #ocMediaConnOverlay,
body.oc-live-demo .oc-media-conn {
    display: none !important;
}
body.oc-live-demo #ocConnStatus,
body.oc-live-demo #ocMediaAntenna,
body.oc-live-demo #ocStartStopBtn {
    display: none !important;
}
.oc-live-demo-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: var(--oc-demo-bar-h, 40px);
    padding: 0 12px;
    background: linear-gradient(90deg, #0b1c2b, #123248);
    color: #dceaf2;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(98, 213, 174, 0.25);
    z-index: 100;
    position: relative;
}
.oc-live-demo-bar strong { color: #62d5ae; font-weight: 800; }
.oc-live-demo-bar a {
    color: #e8fff7;
    text-decoration: none;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(14, 157, 117, 0.22);
    border: 1px solid rgba(98, 213, 174, 0.35);
}
.oc-live-demo-bar .oc-live-demo-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* کلاس پایان‌یافته: ابزارهای زندهٔ کلاس در دسترس نیستند */
body.oc-archive-view #micToggleBtn,
body.oc-archive-view #videoToggleBtn,
body.oc-archive-view #chatToggleBtn,
body.oc-archive-view #studentPicDockBtn,
body.oc-archive-view #ocWbDockBtn,
body.oc-archive-view #pollDockBtn,
body.oc-archive-view #examDockBtn,
body.oc-archive-view #classSettingsBtn,
body.oc-archive-view .oc-dock .oc-dock-btn.danger { display:none !important; }
body.oc-archive-view .oc-attach-btn,
body.oc-archive-view .oc-mic-btn,
body.oc-archive-view .oc-send-btn { opacity:0.45; pointer-events:none; }
.oc-lightbox-tools {
    position:absolute; bottom:calc(24px + var(--oc-sab)); left:50%; transform:translateX(-50%); z-index:9004;
    display:flex; gap:10px; align-items:center; background:rgba(0,0,0,0.55); padding:8px 14px; border-radius:28px;
}
.oc-lightbox-tools button {
    width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
    background:rgba(255,255,255,0.18); color:#fff; font-size:1.25rem; font-weight:700; line-height:1;
}
.oc-lightbox-tools span { color:#fff; font-size:0.78rem; font-weight:700; min-width:42px; text-align:center; font-variant-numeric:tabular-nums; }

/* ---------- GENERIC MODAL (poll + AI) ---------- */
.oc-modal-overlay {
    position:fixed; inset:0; background:rgba(15,23,42,0.55); backdrop-filter:blur(4px);
    z-index:10500; display:none; align-items:center; justify-content:center;
    padding:calc(18px + var(--oc-sat)) calc(18px + var(--oc-sar)) calc(18px + var(--oc-sab)) calc(18px + var(--oc-sal));
}
.oc-modal-overlay.open { display:flex; animation:ovIn 0.2s ease; }
@keyframes ovIn { from{opacity:0;} to{opacity:1;} }
@keyframes spin { to { transform:rotate(360deg); } }
.oc-modal {
    background:#fff; border-radius:var(--radius-lg); width:100%; max-width:460px;
    max-height:88vh; overflow:hidden; box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
    animation:modalIn 0.28s cubic-bezier(0.2,0.9,0.4,1.1);
}
@keyframes modalIn { from{opacity:0; transform:translateY(20px) scale(0.96);} to{opacity:1; transform:translateY(0) scale(1);} }
.oc-modal-head {
    padding:18px 22px; background:linear-gradient(135deg, var(--navy), #1e293b); color:#fff;
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.oc-modal-head-title { display:flex; align-items:center; gap:10px; }
.oc-modal-head-title svg { width:20px; height:20px; }
.oc-modal-head h3 { font-size:1.05rem; font-weight:800; }
.oc-modal-head p { font-size:0.72rem; color:rgba(255,255,255,0.6); margin-top:2px; }
.oc-modal-close-btn { width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,0.15); color:#fff; display:flex; align-items:center; justify-content:center; }
.oc-modal-close-btn svg { width:16px; height:16px; }
.oc-modal-body { padding:20px 22px; overflow-y:auto; }

.oc-modal-label { font-size:0.82rem; font-weight:700; color:var(--navy); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.oc-modal-label svg { width:16px; height:16px; color:var(--blue); }
.oc-modal-input {
    width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:14px;
    font-family:inherit; font-size:0.9rem; transition:border-color 0.2s; margin-bottom:16px;
}
.oc-modal-input:focus { outline:none; border-color:var(--blue); }
.oc-modal-textarea {
    width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:14px;
    font-family:inherit; font-size:0.9rem; resize:vertical; min-height:70px; transition:border-color 0.2s;
}
.oc-modal-textarea:focus { outline:none; border-color:var(--blue); }

/* poll option editor */
.oc-poll-edit-opt { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.oc-poll-edit-opt input { flex:1; padding:10px 12px; border:1.5px solid var(--border); border-radius:12px; font-family:inherit; font-size:0.85rem; }
.oc-poll-edit-opt input:focus { outline:none; border-color:var(--blue); }
.oc-poll-edit-del { width:34px; height:34px; border-radius:10px; border:none; cursor:pointer; background:#fee2e2; color:var(--red); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.oc-poll-edit-del svg { width:15px; height:15px; }
.oc-poll-add-opt {
    width:100%; padding:10px; border:1.5px dashed var(--border); border-radius:12px; cursor:pointer;
    background:var(--surface); color:var(--text-sub); font-family:inherit; font-weight:700; font-size:0.82rem;
    display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:16px;
}
.oc-poll-add-opt svg { width:15px; height:15px; }
.oc-modal-submit {
    width:100%; padding:13px; border-radius:16px; border:none; cursor:pointer;
    background:linear-gradient(95deg, var(--blue), var(--blue-dark)); color:#fff;
    font-family:inherit; font-weight:800; font-size:0.92rem; display:flex; align-items:center; justify-content:center; gap:8px;
    transition:all 0.2s;
}
.oc-modal-submit:hover { transform:translateY(-2px); box-shadow:0 10px 22px -6px rgba(59,130,246,0.5); }
.oc-modal-submit svg { width:18px; height:18px; }
.oc-modal-submit.ai { background:linear-gradient(95deg, var(--indigo), #4f46e5); }
.oc-modal-submit.ai:hover { box-shadow:0 10px 22px -6px rgba(99,102,241,0.5); }

.oc-ai-mic-btn {
    width:100%; padding:12px; border-radius:14px; border:1.5px solid var(--indigo); cursor:pointer;
    background:#eef2ff; color:var(--indigo); font-family:inherit; font-weight:700; font-size:0.85rem;
    display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; transition:all 0.2s;
}
.oc-ai-mic-btn svg { width:18px; height:18px; }
.oc-ai-mic-btn.listening { background:var(--indigo); color:#fff; animation:micPulse 1.2s infinite; }
.oc-ai-status {
    display:none; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
    background:#f5f3ff; border:1px solid #ddd6fe; color:#5b21b6; font-size:0.82rem; font-weight:600; margin-top:4px;
}
.oc-ai-status.show { display:flex; }

@media (max-width:600px) {
    .oc-dock-btn span { display:none; }
    .oc-dock-btn { padding:8px 11px; }
}

/* ============================================================
   ADDED FEATURES — AI SVG drawing layer, quiz (آزمون تستی),
   note-taking (نوت‌برداری). Same design language.
   ============================================================ */

/* --- AI SVG overlay layer on whiteboard (above grid, below pen canvas) --- */
.oc-wb-svg-layer {
    position:absolute; inset:0; width:100%; height:100%;
    z-index:1; pointer-events:none; overflow:hidden;
    fill:none; stroke:none; stroke-width:initial;
}
.oc-wb-svg-layer .ai-art { transform-box:fill-box; }

/* draw-on animation for AI illustrations */
@keyframes wbDash { to { stroke-dashoffset:0; } }
@keyframes wbFadeIn { from { opacity:0; } to { opacity:1; } }
.oc-wb-svg-layer .wb-anim-stroke { animation:wbDash var(--wb-dur,1.4s) ease forwards; }
.oc-wb-svg-layer .wb-anim-fill { animation:wbFadeIn 0.6s ease forwards; opacity:0; }

/* --- AI draw history (inside AI modal) --- */
.oc-ai-history {
    margin-top:14px; padding-top:12px; border-top:1px dashed var(--border);
    display:none;
}
.oc-ai-history.has-items { display:block; }
.oc-ai-history-head {
    font-size:0.78rem; font-weight:800; color:var(--navy); margin-bottom:8px;
    display:flex; align-items:center; gap:6px;
}
.oc-ai-history-list {
    display:flex; flex-direction:column; gap:6px;
    max-height:220px; overflow-y:auto;
}
.oc-ai-history-item {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; border:1.5px solid var(--border); border-radius:12px;
    background:#f8fafc; padding:10px 12px; cursor:pointer;
    font-family:inherit; text-align:right; transition:background 0.15s, border-color 0.15s;
}
.oc-ai-history-item:hover { background:#eef2ff; border-color:#c7d2fe; }
.oc-ai-history-item:active { transform:scale(0.99); }
.oc-ai-history-topic {
    flex:1; min-width:0; font-size:0.82rem; font-weight:700; color:#334155;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.oc-ai-history-time { flex-shrink:0; font-size:0.68rem; font-weight:700; color:var(--text-muted); }

/* --- Whiteboard side drawer (students panel) --- */
.oc-wb-drawer {
    position:absolute; top:0; bottom:0; right:0; width:260px; max-width:80%;
    background:#fff; box-shadow:var(--shadow-lg); z-index:6;
    transform:translateX(105%); transition:transform 0.3s cubic-bezier(0.2,0.9,0.4,1.1);
    display:flex; flex-direction:column; border-right:1px solid var(--border);
}
.oc-wb-drawer.open { transform:translateX(0); }
.oc-wb-drawer-head {
    padding:14px 16px; background:var(--surface); border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    font-size:0.85rem; font-weight:800; color:var(--navy); flex-shrink:0;
}
.oc-wb-drawer-close { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px; display:flex; }
.oc-wb-drawer-close svg { width:16px; height:16px; }
.oc-wb-drawer-body { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; }
.oc-wb-drawer-empty { color:var(--text-muted); font-size:0.78rem; text-align:center; padding:24px 8px; }

/* --- Quiz editor --- */
.oc-quiz-row { display:flex; gap:12px; }
.oc-quiz-qcard { border:1.5px solid var(--border); border-radius:16px; padding:12px; margin-bottom:12px; background:var(--surface); }
.oc-quiz-qcard-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.oc-quiz-qnum { width:26px; height:26px; border-radius:8px; background:var(--blue); color:#fff; font-size:0.78rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.oc-quiz-qcard-head input { flex:1; padding:9px 12px; border:1.5px solid var(--border); border-radius:11px; font-family:inherit; font-size:0.86rem; background:#fff; }
.oc-quiz-qdel { width:30px; height:30px; border-radius:9px; border:none; cursor:pointer; background:#fee2e2; color:var(--red); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.oc-quiz-qdel svg { width:14px; height:14px; }
.oc-quiz-opt { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.oc-quiz-opt-radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--border); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.oc-quiz-opt-radio.correct { border-color:var(--green); background:var(--green); }
.oc-quiz-opt-radio.correct svg { width:13px; height:13px; color:#fff; display:block; }
.oc-quiz-opt-radio svg { display:none; }
.oc-quiz-opt input { flex:1; padding:8px 11px; border:1.5px solid var(--border); border-radius:10px; font-family:inherit; font-size:0.82rem; background:#fff; }
.oc-quiz-opt-hint { font-size:0.68rem; color:var(--text-muted); margin-bottom:8px; }

/* --- Quiz card in chat --- */
.oc-quiz-card {
    align-self:center; width:min(92%, calc(100vw - 48px)); max-width:440px; background:#fff;
    border:1px solid var(--border); border-radius:18px; padding:0; box-shadow:var(--shadow-md); overflow:hidden;
    box-sizing:border-box;
}
.oc-quiz-card-head { background:linear-gradient(135deg, var(--navy), #1e293b); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.oc-quiz-card-head svg { width:20px; height:20px; flex-shrink:0; }
.oc-quiz-card-head h4 { font-size:0.95rem; font-weight:800; }
.oc-quiz-card-head p { font-size:0.72rem; color:rgba(255,255,255,0.7); margin-top:2px; }
.oc-quiz-card-body { padding:14px 16px; }
.oc-quiz-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.oc-quiz-chip { background:var(--surface); border-radius:20px; padding:5px 12px; font-size:0.72rem; font-weight:700; color:var(--text-sub); display:flex; align-items:center; gap:5px; }
.oc-quiz-chip svg { width:13px; height:13px; color:var(--blue); }
.oc-quiz-progress { font-size:0.76rem; color:var(--text-sub); font-weight:700; margin-bottom:10px; }
.oc-quiz-bar-wrap { height:8px; border-radius:8px; background:var(--surface); overflow:hidden; margin-bottom:12px; }
.oc-quiz-bar { height:100%; background:linear-gradient(95deg, var(--blue), var(--blue-dark)); width:0; transition:width 0.6s; }
.oc-quiz-end-btn { width:100%; padding:11px; border-radius:14px; border:none; cursor:pointer; background:linear-gradient(95deg, var(--green), var(--green-dark)); color:#fff; font-family:inherit; font-weight:800; font-size:0.86rem; display:flex; align-items:center; justify-content:center; gap:8px; }
.oc-quiz-end-btn:disabled { opacity:0.55; cursor:default; }
.oc-quiz-end-btn svg { width:17px; height:17px; }

/* --- آزمون: الگوی TBot/SBot (vcex-*) --- */
.vcex-info-card { background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; margin-bottom:14px; }
.vcex-card-header { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--surface); }
.vcex-card-icon { width:40px; height:40px; border-radius:12px; background:#eef2ff; color:var(--indigo); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vcex-card-icon svg { width:20px; height:20px; }
.vcex-card-title { font-size:0.95rem; font-weight:800; color:var(--navy); }
.vcex-card-sub { font-size:0.72rem; color:var(--text-muted); margin-top:2px; line-height:1.6; }
.vcex-meta-row { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; }
.vcex-meta-chip { display:inline-flex; align-items:center; gap:5px; font-size:0.68rem; padding:4px 12px; border-radius:20px; font-weight:700; background:#fff; border:1px solid var(--border); color:var(--text-sub); }
.vcex-meta-chip svg { width:13px; height:13px; color:var(--blue); }
.vcex-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 16px 14px; }
.vcex-sum-box { background:var(--surface); border-radius:14px; padding:10px; text-align:center; }
.vcex-sum-num { font-size:1.35rem; font-weight:900; color:var(--navy); font-variant-numeric:tabular-nums; }
.vcex-sum-lbl { font-size:0.68rem; color:var(--text-muted); font-weight:700; margin-top:2px; }
.vcex-stu-list { display:flex; flex-direction:column; gap:8px; padding:0 16px 16px; }
.vcex-stu-row {
    display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
    border:2px solid var(--border); background:#fff; cursor:pointer; transition:transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    font-family:inherit; text-align:right; width:100%;
}
.vcex-stu-row:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:var(--indigo); }
.vcex-stu-row.no-ans { border-color:rgba(239,68,68,0.35); background:rgba(239,68,68,0.04); }
.vcex-stu-row.graded { border-color:rgba(34,197,94,0.45); background:rgba(34,197,94,0.05); }
.vcex-stu-row.answered { border-color:rgba(59,130,246,0.35); background:rgba(59,130,246,0.04); }
.vcex-stu-av { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.82rem; flex-shrink:0; }
.vcex-stu-main { flex:1; min-width:0; }
.vcex-stu-name { font-weight:800; font-size:0.88rem; color:var(--navy); }
.vcex-stu-status { font-size:0.68rem; color:var(--text-muted); margin-top:2px; }
.vcex-stu-score { font-weight:900; font-size:0.92rem; color:var(--navy); font-variant-numeric:tabular-nums; flex-shrink:0; }
.vcex-stu-chev svg { width:16px; height:16px; color:var(--text-muted); }
.vcex-actions { display:flex; gap:8px; padding:0 16px 16px; flex-wrap:wrap; }
.vcex-actions .oc-modal-submit { flex:1; margin:0; min-width:120px; }
.vcex-actions .oc-note-clear-btn { flex:1; justify-content:center; }
.vcex-analysis-panel { margin:0 16px 16px; padding:14px 16px; border-radius:14px; border:1px solid rgba(99,102,241,0.22); background:linear-gradient(135deg,rgba(238,242,255,0.95),rgba(255,255,255,0.98)); }
.vcex-analysis-title { font-weight:800; font-size:0.88rem; color:var(--navy); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.vcex-analysis-title svg { width:16px; height:16px; color:var(--indigo); }
.vcex-analysis-summary { font-size:0.82rem; line-height:1.85; color:var(--text-sub); margin-bottom:10px; }
.vcex-analysis-sec { font-size:0.8rem; margin-top:8px; }
.vcex-analysis-sec ul { margin:4px 0 0; padding-right:18px; line-height:1.75; }
.vcex-analysis-sec li.ok { color:#15803d; }
.vcex-analysis-sec li.warn { color:#dc2626; }
.vcex-tbl-wrap { overflow-x:auto; margin-top:10px; }
.vcex-tbl { width:100%; border-collapse:collapse; font-size:0.76rem; font-family:inherit; }
.vcex-tbl th, .vcex-tbl td { border:1px solid var(--border); padding:8px 10px; text-align:right; vertical-align:top; }
.vcex-tbl th { background:#f8fafc; font-weight:800; color:var(--navy); }
/* پاسخ‌دهی دانش‌آموز (SBot-style) */
.vcex-take-sheet { background:#fff; border-radius:var(--radius-md); width:100%; max-width:720px; max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow:hidden; }
.vcex-take-head { display:flex; justify-content:space-between; align-items:flex-start; padding:14px 16px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,var(--navy),#1e293b); color:#fff; }
.vcex-take-head strong { font-size:0.95rem; font-weight:800; display:block; }
.vcex-take-timer { font-size:0.76rem; opacity:0.85; margin-top:4px; }
.vcex-take-body { flex:1; overflow-y:auto; padding:12px 16px; }
.vcex-take-foot { padding:12px 16px; border-top:1px solid var(--border); }
.vcex-submit-btn { width:100%; padding:13px 18px; border:none; border-radius:14px; background:linear-gradient(95deg,var(--green),var(--green-dark)); color:#fff; font-family:inherit; font-weight:800; font-size:0.88rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.vcex-submit-btn svg { width:17px; height:17px; }
.vcex-q-block { margin-bottom:16px; padding-bottom:12px; border-bottom:1px dashed var(--border); }
.vcex-q-head { font-weight:800; font-size:0.88rem; margin-bottom:6px; color:var(--navy); }
.vcex-q-score { font-size:0.72rem; color:var(--text-muted); font-weight:400; }
.vcex-q-desc { font-size:0.82rem; color:var(--text-sub); margin-bottom:8px; line-height:1.7; }
.vcex-mcq-options { display:flex; flex-direction:column; gap:8px; }
.vcex-mcq-opt { text-align:right; padding:10px 12px; border-radius:12px; border:2px solid var(--border); background:#fff; font-family:inherit; font-size:0.85rem; cursor:pointer; transition:all 0.15s; color:var(--text-main); }
.vcex-mcq-opt.selected { border-color:var(--blue); background:rgba(59,130,246,0.08); font-weight:700; }
.vcex-mcq-opt.correct { border-color:var(--green); background:rgba(34,197,94,0.08); }
.vcex-mcq-opt.wrong { border-color:var(--red); background:rgba(239,68,68,0.06); }
/* جزئیات دانش‌آموز (معلم) */
.vcex-review-body { padding:12px 16px 16px; max-height:65vh; overflow-y:auto; }
.vcex-ai-draft { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px; padding:12px; margin-bottom:12px; font-size:0.82rem; line-height:1.75; }
.vcex-ai-draft-title { font-weight:800; color:var(--green-dark); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.vcex-ai-draft-title svg { width:15px; height:15px; }
.vcex-auto-score { font-size:0.78rem; color:var(--text-sub); padding:8px 12px; background:var(--surface); border-radius:10px; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.vcex-auto-score svg { width:14px; height:14px; color:var(--blue); }
.hwr-q-block { margin-bottom:16px; padding-bottom:12px; border-bottom:1px dashed var(--border); }
.hwr-q-head { font-weight:700; font-size:0.88rem; margin-bottom:6px; color:var(--navy); }
.hwr-q-ans-label { font-size:0.75rem; font-weight:700; color:var(--text-muted); margin:8px 0 4px; }
.hwr-ans-text { background:#f8fafc; border-radius:10px; padding:10px; font-size:0.85rem; line-height:1.7; }
.hwr-no-ans { color:var(--red); font-size:0.82rem; }
.hwr-hybrid-ans { display:grid; gap:10px; }
.hwr-hybrid-media, .hwr-hybrid-text, .hwr-hybrid-ai { border-radius:10px; }
.hwr-extracted-text { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:10px; }
.hwr-extracted-label { font-size:0.72rem; font-weight:700; color:#15803d; margin-bottom:4px; }
.hwr-extracted-body { font-size:0.84rem; line-height:1.75; }
.hwr-conf-badge { display:inline-flex; align-items:center; gap:4px; font-size:0.7rem; font-weight:800; padding:3px 8px; border-radius:999px; }
.hwr-conf-green { color:#15803d; }
.hwr-conf-yellow { color:#a16207; }
.hwr-conf-red { color:#b91c1c; }
.hwr-conf-hint { font-size:0.78rem; margin-top:8px; padding:8px 10px; border-radius:8px; }
.hwr-conf-hint-yellow { background:#fefce8; border:1px solid #fde047; color:#854d0e; }
.hwr-conf-hint-red { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.hwr-filter-bar { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; align-items:center; }
.hwr-filter-chip { border:1px solid var(--border); background:#fff; border-radius:999px; padding:5px 12px; font-size:0.75rem; font-weight:700; cursor:pointer; }
.hwr-filter-chip.active { background:#eef2ff; border-color:#6366f1; color:#4338ca; }
.hwr-bulk-grade-btn { margin-right:auto; background:#1E7C50; color:#fff; border:none; border-radius:8px; padding:6px 12px; font-size:0.75rem; font-weight:800; cursor:pointer; }
.hwr-grading-progress { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; }
.hwr-gp-chip { font-size:0.68rem; font-weight:800; padding:4px 10px; border-radius:999px; }
.hwr-gp-chip.queued { background:#f1f5f9; color:#475569; }
.hwr-gp-chip.grading { background:#eff6ff; color:#2563eb; }
.hwr-gp-chip.ready { background:#ecfdf5; color:#15803d; }
.hwr-gp-chip.waiting { background:#fff7ed; color:#c2410c; }
.hwr-gp-chip.error { background:#fef2f2; color:#dc2626; }
.hwr-gp-chip.graded { background:#f0fdf4; color:#166534; }
.hwr-stu-ai-progress, .hwr-stu-suggest { font-size:0.72rem; margin-top:4px; opacity:0.9; }
.hwr-stu-conf { margin-top:6px; }
.hwr-ai-queue-status { font-size:0.78rem; color:#2563eb; margin-bottom:8px; font-weight:700; }
.hwr-q-ai-score { font-size:0.75rem; font-weight:700; margin-left:8px; }
.hwr-q-ai-fb { font-size:0.78rem; margin-top:6px; line-height:1.6; color:var(--text-muted); }
.hw-ai-stepper { margin:12px 0; padding:12px; border-radius:12px; background:#f8fafc; border:1px solid #e2e8f0; }
.hw-ai-stepper-label { font-size:0.82rem; font-weight:800; color:#1e3a5f; margin-bottom:10px; }
.hw-ai-steps { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hw-ai-step { display:flex; align-items:center; gap:6px; font-size:0.72rem; color:#94a3b8; }
.hw-ai-step.done { color:#15803d; }
.hw-ai-step.active { color:#2563eb; font-weight:800; }
.hw-ai-step-dot { width:10px; height:10px; border-radius:50%; background:currentColor; opacity:0.35; }
.hw-ai-step.active .hw-ai-step-dot, .hw-ai-step.done .hw-ai-step-dot { opacity:1; }
.hw-ai-step-line { flex:1; min-width:16px; height:2px; background:#e2e8f0; }
.hw-ai-step-line.done { background:#86efac; }
.hw-ai-stepper-error { margin:12px 0; padding:10px 12px; border-radius:10px; background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; font-size:0.82rem; font-weight:700; }
.exr-auto-tag { font-size:0.74rem; margin-top:4px; font-weight:700; }
.exr-auto-tag.ok { color:var(--green-dark); }
.exr-auto-tag.bad { color:var(--red-dark); }
.exr-key { font-size:0.72rem; color:var(--text-muted); margin-top:4px; }
.vcex-final-section { margin-top:12px; padding-top:12px; border-top:2px solid var(--border); }
.vcex-form-label { font-size:0.78rem; font-weight:800; color:var(--text-sub); margin-bottom:6px; display:block; }
.vcex-feedback-wrap { position:relative; }
.vcex-feedback-ta { width:100%; border-radius:12px; border:1px solid var(--border); padding:10px; font-family:inherit; font-size:0.85rem; resize:vertical; min-height:72px; }
.vcex-feedback-wrap.is-loading .vcex-feedback-ta { opacity:0.55; pointer-events:none; }
.vcex-feedback-hint { display:flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:700; color:var(--indigo); margin-bottom:8px; padding:8px 10px; background:#eef2ff; border-radius:10px; border:1px solid #c7d2fe; }
.vcex-feedback-spinner { width:14px; height:14px; border:2px solid rgba(99,102,241,0.25); border-top-color:var(--indigo); border-radius:50%; animation:spin 0.6s linear infinite; flex-shrink:0; }
.vcex-feedback-ta.vcex-feedback-loading { background:#f8fafc; }
.vcex-ai-regen-btn {
    display:inline-flex; align-items:center; gap:6px; border:none; border-radius:10px;
    padding:6px 12px; font-family:inherit; font-size:0.74rem; font-weight:800;
    background:#eef2ff; color:#4338ca; cursor:pointer;
}
.vcex-ai-regen-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; }
.vcex-ai-regen-btn:hover { background:#e0e7ff; }
.vcex-grade-tabs { display:flex; gap:8px; margin:12px 0; }
.vcex-tab { flex:1; padding:8px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; font-size:0.82rem; font-weight:700; font-family:inherit; }
.vcex-tab.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.vcex-tab-panel { display:none; }
.vcex-tab-panel.active { display:block; }
.vcex-disc-btns { display:flex; gap:10px; margin:8px 0; }
.vcex-disc-plus, .vcex-disc-minus { flex:1; padding:10px; border-radius:10px; border:2px solid; font-weight:800; cursor:pointer; background:#fff; font-family:inherit; font-size:0.82rem; }
.vcex-disc-plus { border-color:var(--green); color:var(--green-dark); }
.vcex-disc-minus { border-color:var(--red); color:var(--red-dark); }
.vcex-disc-plus.active { background:#dcfce7; }
.vcex-disc-minus.active { background:#fee2e2; }
.vcex-score-inp { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:12px; font-family:inherit; font-size:0.88rem; font-weight:800; text-align:center; }
.vcex-ai-comment-row { display:flex; gap:8px; margin-top:8px; }
.vcex-ai-comment-btn { border:1px solid var(--indigo); background:#eef2ff; color:var(--indigo); border-radius:10px; padding:8px 12px; font-family:inherit; font-weight:700; font-size:0.76rem; cursor:pointer; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.vcex-ai-comment-btn svg { width:14px; height:14px; }
.vcex-note-teacher-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); }
.vcex-note-view-stat { font-size:0.74rem; font-weight:700; color:var(--text-sub); display:flex; align-items:center; gap:5px; }
.vcex-note-view-stat svg { width:14px; height:14px; }
.vcex-note-report-btn { border:1px solid var(--indigo); background:#eef2ff; color:var(--indigo); border-radius:10px; padding:6px 10px; font-family:inherit; font-weight:700; font-size:0.72rem; cursor:pointer; }
.vcex-note-view-row.green { background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2); border-radius:12px; }
.vcex-note-view-row.red { background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.15); border-radius:12px; }
.vcex-note-view-status { font-size:0.76rem; font-weight:800; color:var(--text-sub); white-space:nowrap; }
.vcex-note-view-row.green .vcex-note-view-status { color:var(--green-dark); }
.vcex-note-view-row.red .vcex-note-view-status { color:var(--red-dark); }
#ocNoteViewsModal .oc-modal { max-width:560px; }
#ocQuizStudentModal .oc-modal { max-width:760px; }
#ocQuizTakeOverlay .oc-modal { max-width:720px; background:transparent; box-shadow:none; padding:0; }
@media (max-width:768px) { .vcex-summary { grid-template-columns:1fr; } }

/* --- Quiz results --- */
.oc-res-summary { display:flex; gap:10px; margin-bottom:16px; }
.oc-res-box { flex:1; background:var(--surface); border-radius:14px; padding:12px; text-align:center; }
.oc-res-box .num { font-size:1.5rem; font-weight:900; color:var(--navy); }
.oc-res-box .lbl { font-size:0.7rem; color:var(--text-sub); font-weight:700; margin-top:2px; }
.oc-res-list { display:flex; flex-direction:column; gap:7px; }
.oc-res-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:var(--surface); }
.oc-res-avatar { width:32px; height:32px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.78rem; }
.oc-res-name { flex:1; font-size:0.84rem; font-weight:700; }
.oc-res-score { font-size:0.84rem; font-weight:800; font-variant-numeric:tabular-nums; }
.oc-res-score.high { color:var(--green-dark); }
.oc-res-score.mid { color:var(--amber); }
.oc-res-score.low { color:var(--red-dark); }
.oc-res-section-title { font-size:0.8rem; font-weight:800; color:var(--navy); margin:16px 0 8px; }

/* --- Note-taking --- */
.oc-note-livebadge { display:none; align-items:center; gap:8px; background:#fef2f2; border:1px solid #fecaca; color:var(--red-dark); padding:8px 14px; border-radius:14px; font-size:0.78rem; font-weight:700; margin-bottom:14px; }
.oc-note-livebadge.active { display:flex; }
.oc-note-actions { display:flex; gap:8px; align-items:stretch; margin-top:6px; }
.oc-note-clear-btn { border:1.5px solid var(--border); background:#fff; color:var(--text-sub); cursor:pointer; border-radius:14px; padding:0 14px; font-family:inherit; font-weight:700; font-size:0.78rem; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.oc-note-clear-btn svg { width:15px; height:15px; }
.oc-note-paper { background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; max-height:52vh; overflow-y:auto; line-height:1.9; color:var(--text-main); }
.oc-note-paper h1, .oc-note-paper h2, .oc-note-paper h3 { color:var(--navy); margin:14px 0 8px; font-weight:800; }
.oc-note-paper h1 { font-size:1.25rem; } .oc-note-paper h2 { font-size:1.08rem; } .oc-note-paper h3 { font-size:0.96rem; }
.oc-note-paper p { margin-bottom:10px; font-size:0.92rem; }
.oc-note-paper ul, .oc-note-paper ol { margin:8px 24px 12px; } .oc-note-paper li { margin-bottom:5px; font-size:0.9rem; }
.oc-note-paper svg { max-width:100%; height:auto; display:block; margin:14px auto; }
.oc-note-paper .note-figure { background:var(--surface); border-radius:14px; padding:14px; margin:14px 0; }
.oc-note-paper .note-figure figcaption { text-align:center; font-size:0.78rem; color:var(--text-sub); margin-top:8px; font-weight:700; }
.oc-note-paper blockquote { border-right:4px solid var(--blue); background:var(--surface); padding:10px 14px; border-radius:10px; margin:12px 0; font-size:0.9rem; }

/* --- Note card in chat --- */
.oc-note-card { align-self:center; width:min(92%, calc(100vw - 48px)); max-width:440px; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-md); overflow:hidden; cursor:pointer; transition:all 0.18s; box-sizing:border-box; }
.oc-note-card:hover { box-shadow:var(--shadow-lg); }
.oc-note-card-head { background:linear-gradient(135deg, var(--indigo), #4f46e5); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.oc-note-card-head svg { width:20px; height:20px; flex-shrink:0; }
.oc-note-card-head h4 { font-size:0.95rem; font-weight:800; }
.oc-note-card-head p { font-size:0.72rem; color:rgba(255,255,255,0.7); margin-top:2px; }
.oc-note-card-body { padding:14px 16px; font-size:0.84rem; color:var(--text-sub); line-height:1.7; }
.oc-note-card-open { color:var(--indigo); font-weight:800; font-size:0.78rem; margin-top:8px; display:flex; align-items:center; gap:5px; }
.oc-note-card-open svg { width:14px; height:14px; }

/* --- LIVE NOTE BANNER (top of page, only while teacher mic is on) --- */
.oc-note-livebar { display:none; align-items:center; gap:12px; background:linear-gradient(135deg,#eef2ff,#e0e7ff); border-bottom:1px solid #c7d2fe; padding:9px 16px; flex-shrink:0; z-index:25; }
.oc-note-livebar.active { display:flex; }
.oc-note-livebar .nlb-anim { width:34px; height:34px; flex-shrink:0; color:var(--indigo); }
.oc-note-livebar .nlb-text { flex:1; min-width:0; }
.oc-note-livebar .nlb-text strong { display:block; font-size:0.82rem; font-weight:800; color:#3730a3; }
.oc-note-livebar .nlb-text span { font-size:0.7rem; color:var(--text-sub); }
.oc-note-livebar.idle .nlb-text strong { color:var(--text-sub); }
.oc-note-livebar .nlb-btn { border:none; cursor:pointer; border-radius:12px; padding:8px 14px; font-family:inherit; font-weight:800; font-size:0.76rem; display:flex; align-items:center; gap:6px; flex-shrink:0; color:#fff; }
.oc-note-livebar .nlb-btn svg { width:15px; height:15px; }
.oc-note-livebar .nlb-stop { background:linear-gradient(95deg,var(--red),var(--red-dark)); }
.oc-note-livebar .nlb-start { background:linear-gradient(95deg,var(--green),var(--green-dark)); }
.oc-note-livebar .nlb-view { background:rgba(99,102,241,0.15); color:var(--indigo); }
/* pen writing animation (only animates while capturing) */
.oc-note-livebar .nlb-pen { transform-origin:center; }
.oc-note-livebar.active.writing .nlb-pen { animation:nlbWrite 0.9s ease-in-out infinite; }
.oc-note-livebar.active.writing .nlb-line { stroke-dasharray:18; stroke-dashoffset:18; animation:nlbLine 1.8s linear infinite; }
@keyframes nlbWrite { 0%,100%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(1px,-1px) rotate(-6deg);} 50%{ transform:translate(2px,0) rotate(0);} 75%{ transform:translate(1px,1px) rotate(6deg);} }
@keyframes nlbLine { from{ stroke-dashoffset:18; } to{ stroke-dashoffset:-18; } }

/* small settings (gear) button inside AI modal head */
.oc-ai-gear { width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,0.15); color:#fff; display:flex; align-items:center; justify-content:center; margin-left:6px; }
.oc-ai-gear svg { width:15px; height:15px; }

/* --- Feed cards (quiz/poll/note) — standalone in chat, not inside bubbles --- */
.oc-feed-item { display:flex; justify-content:center; width:100%; margin:14px 0; animation:msgIn 0.35s ease; min-width:0; box-sizing:border-box; }
.oc-feed-inner { width:min(92%, calc(100vw - 48px)); max-width:440px; min-width:0; box-sizing:border-box; overflow:hidden; }
.oc-feed-inner img, .oc-note-card-body img, .oc-quiz-card-body img, .oc-poll-card img {
    max-width:100%; height:auto; display:block;
}
.oc-note-card, .oc-quiz-card, .oc-poll-card { max-width:min(440px, calc(100vw - 48px)); width:100%; box-sizing:border-box; overflow:hidden; }
.oc-feed-desc { font-size:0.84rem; color:var(--text-sub); line-height:1.75; margin-bottom:12px; }
.oc-grade-row { display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:14px; background:var(--surface); margin-bottom:8px; flex-wrap:wrap; }
.oc-grade-main { flex:1; min-width:160px; }
.oc-grade-comment { width:100%; margin-top:8px; min-height:52px; border:1px solid var(--border); border-radius:10px; padding:8px; font-family:inherit; font-size:0.78rem; resize:vertical; }
.oc-grade-actions { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.oc-grade-score { width:64px; padding:8px; border:1px solid var(--border); border-radius:10px; font-family:inherit; font-weight:800; text-align:center; }
.oc-grade-btn { border:none; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:800; font-size:0.82rem; }
.oc-grade-btn.plus { background:#dcfce7; color:#166534; }
.oc-grade-btn.minus { background:#fee2e2; color:#991b1b; }
.oc-grade-btn.ai { background:#ede9fe; color:#5b21b6; }
.oc-grade-btn.save { background:var(--blue); color:#fff; }
.oc-activity-row { border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:10px; background:#fff; }
.oc-activity-type { font-size:0.68rem; color:var(--text-muted); margin-right:8px; }
.oc-activity-analysis { font-size:0.78rem; color:var(--text-sub); margin-top:8px; white-space:pre-wrap; line-height:1.7; max-height:120px; overflow:auto; }

/* ─── تور راهنمای دموی کلاس آنلاین ─── */
.oc-live-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 10850;
    pointer-events: auto;
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
}
.oc-live-tour-overlay[hidden] { display: none !important; }
.oc-live-tour-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
}
.oc-live-tour-spot {
    position: absolute;
    border: 2px solid #62d5ae;
    border-radius: 16px;
    box-shadow: 0 0 0 4px rgba(98, 213, 174, 0.28), 0 0 28px rgba(98, 213, 174, 0.35);
    pointer-events: none;
    transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease;
    animation: ocTourPulse 2.2s ease-in-out infinite;
}
@keyframes ocTourPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(98, 213, 174, 0.28), 0 0 28px rgba(98, 213, 174, 0.35); }
    50% { box-shadow: 0 0 0 7px rgba(98, 213, 174, 0.18), 0 0 36px rgba(98, 213, 174, 0.45); }
}
.oc-live-tour-card {
    position: absolute;
    max-width: min(400px, calc(100vw - 32px));
    min-width: 280px;
    background: linear-gradient(165deg, #fff 0%, #f4faf8 100%);
    border: 1px solid #d4efe4;
    border-radius: 20px;
    padding: 18px 20px 16px;
    box-shadow: 0 24px 60px rgba(5, 17, 27, 0.35);
    z-index: 2;
    color: #0f172a;
}
.oc-live-tour-step-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 900;
    color: #0e9d75;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e8fbf4;
}
.oc-live-tour-progress {
    display: flex;
    gap: 5px;
    margin-bottom: 12px;
}
.oc-live-tour-dot {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: #dce7ec;
    transition: background 0.25s;
}
.oc-live-tour-dot.done { background: #62d5ae; }
.oc-live-tour-dot.current { background: linear-gradient(90deg, #62d5ae, #0e9d75); }
.oc-live-tour-card h4 {
    font-size: 1.05rem;
    font-weight: 900;
    margin: 0 0 8px;
    color: #0d2740;
    line-height: 1.45;
}
.oc-live-tour-card p {
    font-size: 0.82rem;
    color: #53687a;
    line-height: 1.75;
    margin: 0 0 14px;
}
.oc-live-tour-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.oc-live-tour-btn {
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #cce0e4;
    background: #fff;
    color: #53687a;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.oc-live-tour-btn:hover { border-color: #62d5ae; color: #0d2740; transform: translateY(-1px); }
.oc-live-tour-btn.primary {
    background: #62d5ae;
    color: #091b2b;
    border-color: #62d5ae;
    box-shadow: 0 8px 20px rgba(98, 213, 174, 0.35);
}
.oc-live-tour-btn.primary:hover { filter: brightness(1.05); color: #091b2b; }
.oc-live-tour-btn.try {
    background: #edf6ff;
    border-color: #b8d9f5;
    color: #2563eb;
}
body.oc-live-tour-active .oc-tour-target-pulse {
    position: relative;
    z-index: 10840 !important;
}
.oc-live-demo-bar .oc-live-tour-start {
    cursor: pointer;
    border: 1px solid rgba(255, 191, 69, 0.55);
    background: rgba(255, 191, 69, 0.18);
    color: #fff5dc;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
}
.oc-live-demo-bar .oc-live-tour-start:hover {
    background: rgba(255, 191, 69, 0.32);
}
@media (max-width: 640px) {
    .oc-live-tour-card {
        right: 12px !important;
        left: 12px !important;
        max-width: none;
        min-width: 0;
    }
}