/* KC Live Session v2 — Frontend Styles
   All classes namespaced with .kcls- to avoid collisions with KC Pro */

:root {
    --kcls-bg:      #18192b;
    --kcls-surf:    #1e2035;
    --kcls-bdr:     #2d3055;
    --kcls-a1:      #e94560;   /* accent — buttons, danger */
    --kcls-a2:      #4ecdc4;   /* accent2 — status, timer */
    --kcls-txt:     #dde1f0;
    --kcls-muted:   #7a7fa8;
    --kcls-r:       7px;
    --kcls-sh:      0 8px 30px rgba(0,0,0,.55);
    --kcls-z-draw:  9990;
    --kcls-z-cp:    9995;
    --kcls-z-toast: 9999;
}

/* ── Utilities ─────────────────────────────────────────────── */
.kcls-hide   { display: none !important; }
.kcls-on     { background: var(--kcls-a2)  !important; color: #111 !important; }
.kcls-fw     { width: 100%; }

/* ── Root ──────────────────────────────────────────────────── */
#kcls-root {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: var(--kcls-txt);
}

/* ── Launch button ─────────────────────────────────────────── */
.kcls-launch-btn {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: var(--kcls-z-draw);
    background: var(--kcls-a1);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--kcls-sh);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: transform .15s, box-shadow .15s;
}
.kcls-launch-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.6); }

/* ── Drawer ────────────────────────────────────────────────── */
.kcls-drawer {
    position: fixed;
    bottom: 62px;
    right: 18px;
    width: 296px;
    background: var(--kcls-bg);
    border: 1px solid var(--kcls-bdr);
    border-radius: var(--kcls-r);
    box-shadow: var(--kcls-sh);
    z-index: var(--kcls-z-draw);
    overflow: hidden;
    animation: kcls-up .18s ease;
}
@keyframes kcls-up {
    from { opacity:0; transform: translateY(10px); }
    to   { opacity:1; transform: translateY(0); }
}

.kcls-drawer-hd {
    background: var(--kcls-surf);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--kcls-bdr);
    font-weight: 700;
    font-size: 14px;
}

.kcls-panel {
    padding: 13px 14px;
    border-bottom: 1px solid var(--kcls-bdr);
}
.kcls-panel:last-child { border-bottom: none; }

.kcls-sec-lbl {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--kcls-muted);
    margin-bottom: 8px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.kcls-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 14px; border: none; border-radius: var(--kcls-r);
    cursor: pointer; font-size: 13px; font-weight: 600; gap: 5px;
    transition: filter .15s;
}
.kcls-btn-p       { background: var(--kcls-a1);  color: #fff; }
.kcls-btn-danger  { background: #a93226; color: #fff; }
.kcls-btn:disabled { opacity: .5; cursor: not-allowed; }
.kcls-btn:hover:not(:disabled) { filter: brightness(1.15); }
.kcls-btn-mini {
    background: var(--kcls-surf); color: var(--kcls-txt);
    border: 1px solid var(--kcls-bdr); border-radius: 5px;
    padding: 4px 8px; font-size: 11px; cursor: pointer;
}
.kcls-icon-btn {
    background: transparent; border: none;
    color: var(--kcls-muted); font-size: 16px;
    cursor: pointer; padding: 2px 6px; border-radius: 4px;
    line-height: 1; transition: color .1s;
}
.kcls-icon-btn:hover { color: var(--kcls-txt); }

/* ── Token box ─────────────────────────────────────────────── */
.kcls-token-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--kcls-surf); border: 1px solid var(--kcls-bdr);
    border-radius: var(--kcls-r); padding: 7px 10px; margin-bottom: 8px;
}
.kcls-token-row code {
    flex: 1; font-size: 11px; color: var(--kcls-a2); word-break: break-all;
}

/* ── Status ────────────────────────────────────────────────── */
.kcls-status-txt { font-size: 11px; color: var(--kcls-muted); margin: 6px 0 0; }
.kcls-pill {
    display: inline-block;
    padding: 2px 8px; border-radius: 11px;
    font-size: 11px; font-weight: 600;
}
.kcls-pill-ok  { background: rgba(78,205,196,.2); color: var(--kcls-a2); }
.kcls-pill-w   { background: rgba(255,165,0,.2);  color: orange; }
.kcls-pill-err { background: rgba(200,50,50,.2);  color: #e25; }
.kcls-pills-row { display: flex; gap: 5px; margin: 5px 0; }

/* ── Timer in drawer ───────────────────────────────────────── */
.kcls-timer-row {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 6px;
}
.kcls-timer-val {
    font-size: 22px; font-weight: 700; color: var(--kcls-a2);
    font-variant-numeric: tabular-nums;
}

/* ── Text input ────────────────────────────────────────────── */
.kcls-input {
    width: 100%; box-sizing: border-box;
    background: var(--kcls-surf); border: 1px solid var(--kcls-bdr);
    border-radius: var(--kcls-r); color: var(--kcls-txt);
    padding: 8px 10px; font-size: 13px;
}
.kcls-input:focus { outline: 1px solid var(--kcls-a2); }

/* ── Teacher Control Panel ─────────────────────────────────── */
.kcls-cp {
    position: fixed;
    top: 72px;
    right: 18px;
    width: 232px;
    background: var(--kcls-bg);
    border: 1px solid var(--kcls-bdr);
    border-radius: var(--kcls-r);
    box-shadow: var(--kcls-sh);
    z-index: var(--kcls-z-cp);
    overflow: hidden;
}
.kcls-cp-hd {
    background: var(--kcls-surf);
    padding: 8px 12px;
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; font-size: 13px;
    border-bottom: 1px solid var(--kcls-bdr);
}
.kcls-cp-sec {
    padding: 8px 12px;
    border-bottom: 1px solid var(--kcls-bdr);
}
.kcls-cp-sec:last-child { border-bottom: none; }
.kcls-cp-lbl {
    display: block; font-size: 10px; text-transform: uppercase;
    letter-spacing: .5px; color: var(--kcls-muted); margin-bottom: 5px;
}
.kcls-cp-row { display: flex; flex-wrap: wrap; gap: 4px; }
.kcls-cp-btn {
    flex: 1; min-width: 46px;
    padding: 5px 6px; font-size: 11px; font-weight: 600;
    background: var(--kcls-surf); color: var(--kcls-txt);
    border: 1px solid var(--kcls-bdr); border-radius: 5px; cursor: pointer;
    transition: background .12s;
}
.kcls-cp-btn:hover { background: var(--kcls-bdr); }
.kcls-cp-danger { background: #7b1d1d !important; border-color: #a93226 !important; }
.kcls-cp-hint { font-size: 10px; color: var(--kcls-muted); margin: 4px 0 0; line-height: 1.4; }

.kcls-cp-timer-sec { text-align: center; }
.kcls-cp-timer {
    font-size: 28px; font-weight: 700;
    color: var(--kcls-a2); font-variant-numeric: tabular-nums;
    padding: 4px 0;
}

/* ── Floating Session Video Panel ──────────────────────────── */
/* Completely separate from KC Pro's media stage and webcam box.
   KC Pro's cam button, fit/align/drag/resize controls are untouched. */

.kcls-video-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 300px;
    background: var(--kcls-bg);
    border: 1px solid var(--kcls-bdr);
    border-radius: var(--kcls-r);
    box-shadow: var(--kcls-sh);
    z-index: 9994;
    overflow: hidden;
    user-select: none;
}
.kcls-vpanel-hd {
    background: var(--kcls-surf);
    padding: 7px 10px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--kcls-bdr);
    font-size: 12px; font-weight: 700;
    cursor: grab;
}
.kcls-vpanel-controls { display: flex; gap: 2px; }

.kcls-vpanel-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: #000;
}

.kcls-vpanel-vid-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #111;
    border-radius: 5px;
    overflow: hidden;
}
.kcls-vpanel-vid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
.kcls-vpanel-badge {
    position: absolute;
    bottom: 5px; left: 7px;
    font-size: 10px; font-weight: 600;
    background: rgba(0,0,0,.7); color: #fff;
    padding: 1px 7px; border-radius: 4px;
    pointer-events: none;
}

/* ── Video panel toolbar toggles ───────────────────────────── */
/* Cam / EC buttons share kcls-icon-btn base; .kcls-on = feature is OFF */
#kcls-vp-cam.kcls-on,
#kcls-vp-ec.kcls-on {
    color: var(--kcls-a1) !important;   /* red tint so user sees it's off */
}

/* ── Note highlights ───────────────────────────────────────── */
/* Remote notes glow in teal so teacher and student notes are distinct */
.kc-key.kcls-remote {
    background: var(--kcls-a2) !important;
    box-shadow: 0 0 14px var(--kcls-a2) !important;
}
/* Hide own or remote notes when teacher sets vis mode */
#keycoach-wrapper.kcls-hide-mine   .kc-key.active:not(.kcls-remote) { background: transparent !important; box-shadow: none !important; }
#keycoach-wrapper.kcls-hide-remote .kc-key.kcls-remote               { background: transparent !important; box-shadow: none !important; }

/* ── Toast ─────────────────────────────────────────────────── */
#kcls-toasts {
    position: fixed;
    top: 14px; left: 50%; transform: translateX(-50%);
    z-index: var(--kcls-z-toast);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    pointer-events: none;
}
.kcls-toast {
    padding: 7px 18px; border-radius: 18px;
    font-size: 13px; font-weight: 600; color: #fff;
    opacity: 0; transform: translateY(-6px);
    transition: opacity .2s, transform .2s;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.kcls-show      { opacity: 1; transform: translateY(0); }
.kcls-toast-success { background: #1b6e5d; }
.kcls-toast-error   { background: #7b1d1d; }
.kcls-toast-info    { background: #1a3761; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .kcls-drawer { width: calc(100vw - 28px); right: 14px; bottom: 56px; }
    .kcls-cp     { width: calc(100vw - 28px); top: auto; bottom: 56px; right: 14px; }
    .kcls-launch-lbl { display: none; }
    .kcls-video-panel { width: calc(100vw - 28px); left: 14px; bottom: 56px; }
}