/* ============================================================
   exercise.css
   Part of KineticAI Frontend — split from v6_updated.html
   ============================================================ */

/* ---- LIVE SESSION ---- */
.session-layout{display:grid;grid-template-columns:1fr 340px;gap:18px;height:calc(100vh - 116px);}
.camera-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-xl);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;}

/* Idle state */
.cam-idle{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.cam-circle{width:90px;height:90px;border-radius:50%;background:var(--surface);border:2px dashed var(--border3);display:flex;align-items:center;justify-content:center;font-size:34px;}
.cam-title{font-size:17px;font-weight:600;}
.cam-sub{font-size:13px;color:var(--text2);}

/* Live state */
#cam-live{display:none;width:100%;height:100%;position:relative;}
.skeleton-svg{width:100%;height:100%;position:absolute;top:0;left:0;}
.scan-overlay{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(56,189,248,0.015) 4px,rgba(56,189,248,0.015) 5px);pointer-events:none;}
.cam-corner{position:absolute;width:20px;height:20px;border-color:var(--neon);border-style:solid;opacity:.6;}
.cam-corner.tl{top:12px;left:12px;border-width:2px 0 0 2px;border-radius:3px 0 0 0;}
.cam-corner.tr{top:12px;right:12px;border-width:2px 2px 0 0;border-radius:0 3px 0 0;}
.cam-corner.bl{bottom:12px;left:12px;border-width:0 0 2px 2px;border-radius:0 0 0 3px;}
.cam-corner.br{bottom:12px;right:12px;border-width:0 2px 2px 0;border-radius:0 0 3px 0;}

/* Status bar */
.cam-status-bar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);border:1px solid var(--border2);border-radius:8px;padding:6px 16px;}
.live-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dot-on{background:var(--red);animation:pulse-r 1.5s infinite;}
.dot-off{background:var(--text3);}
@keyframes pulse-r{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.5);}50%{box-shadow:0 0 0 5px rgba(248,113,113,0);}}
.cam-status-txt{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--text2);}
.cam-timer{font-size:17px;font-weight:700;color:var(--neon);letter-spacing:1px;}
.cam-frames{font-size:11px;color:var(--text3);}

/* Feedback bubble */
#fb-wrap{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:88%;display:none;}
.fb-box{border-radius:var(--r-lg);padding:12px 16px;display:flex;align-items:flex-start;gap:12px;border:1px solid transparent;background:rgba(12,17,29,.88);backdrop-filter:blur(12px);}
.fb-box.fb-red{border-color:var(--red-border);}
.fb-box.fb-orange{border-color:var(--orange-border);}
.fb-box.fb-yellow{border-color:var(--yellow-border);}
.fb-box.fb-green{border-color:var(--neon-border);}
.fb-ico{font-size:18px;flex-shrink:0;margin-top:2px;}
.fb-text{font-size:13px;line-height:1.6;font-weight:500;}

/* Session sidebar */
.sess-sidebar{display:flex;flex-direction:column;gap:14px;overflow-y:auto;}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px;}
.ex-btn{padding:10px 8px;border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;text-align:center;font-size:12px;font-weight:600;transition:all .15s;background:var(--bg2);color:var(--text2);font-family:var(--font);}
.ex-btn:hover{border-color:var(--border2);color:var(--text);}
.ex-btn.SELECTED{border-color:var(--neon);background:var(--neon-bg);color:var(--neon);}

.angle-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);}
.angle-row:last-child{border-bottom:none;}
.angle-name{font-size:12px;color:var(--text2);}
.angle-val-wrap{display:flex;align-items:center;gap:8px;}
.angle-val{font-size:15px;font-weight:700;font-family:var(--font-display);}
.angle-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;letter-spacing:.5px;}
.at-ok{background:var(--neon-bg);color:var(--neon);}
.at-warn{background:var(--yellow-bg);color:var(--yellow);}
.at-bad{background:var(--red-bg);color:var(--red);}

.sess-btns{display:flex;flex-direction:column;gap:8px;margin-top:4px;}