/* Front-end styles v2.3 */
.gic-wb-player { font-family: var(--gic-font, Arial, sans-serif); margin:14px 0; position:relative; }

.gic-wb-header { margin-bottom:8px; }
.gic-wb-title { font-size:22px; font-weight:700; margin-bottom:6px; }
.gic-wb-question { color:#222; margin-bottom:6px; }
.gic-wb-notes { background:#fff7cc; border-left:4px solid #e0c34f; padding:6px 8px; margin-bottom:8px; border-radius:4px; }

/* Blackboard viewport with scroll */
.gic-wb-canvas-viewport {
  background:#111; border-radius:8px; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  height:392px; overflow-y:auto; overflow-x:hidden; padding:10px;
}
.gic-wb-canvas-inner { width:100%; height:auto; }
.gic-wb-canvas-viewport canvas { display:block; max-width:100%; }

/* Controls bar */
.gic-wb-controls { margin-top:8px; display:flex; gap:8px; align-items:center; flex-wrap: wrap; justify-content:center; }
.gic-wb-controls button, .gic-wb-controls select, .gic-wb-controls input { cursor:pointer; }

/* Draggable ticker (floating) */
.gic-ticker-float {
  position: fixed;
  left: 50%; bottom: 12px; transform: translateX(-50%);
  background:#0f172a; color:#fff; border-radius:6px;
  padding:6px 10px; z-index:1001; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,0.2); cursor:move;
}
.gic-ticker-inner { display:inline-block; animation: gic-marquee 18s linear infinite; }
@keyframes gic-marquee { 0% { transform: translateX(0);} 100% { transform: translateX(-100%);} }

/* Draggable teacher box (floating) */
.gic-teacher-float {
  position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%);
  z-index:1002; background:#ffffff; border:1px solid #eee;
  box-shadow:0 6px 24px rgba(0,0,0,0.16); border-radius:10px;
  padding:8px 10px; display:flex; align-items:center; gap:10px; cursor:move;
}
.gic-teacher-photo { width:56px; height:56px; border-radius:8px; background-size:cover; background-position:center; background-color:#ddd; }
.gic-teacher-photo.gic-empty {
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%), 
                    linear-gradient(-45deg, #eee 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #eee 75%), 
                    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size:20px 20px; background-position:0 0, 0 10px, 10px -10px, -10px 0;
}
.gic-teacher-name { font-weight:700; }
.gic-teacher-title { color:#555; font-size:13px; }

@media (max-width: 720px){
  .gic-teacher-float, .gic-ticker-float { left: 50%; transform: translateX(-50%); }
}