/* MasteryGate Study Notebook + Pomodoro Timer CSS
   Ported from module.css — subject-agnostic version */

#notebookBtn {
    position:fixed; bottom:24px; right:80px; z-index:9998;
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,#e65100,#ff9800); color:#fff; border:none;
    font-size:1.35rem; cursor:pointer;
    box-shadow:0 4px 16px rgba(230,81,0,.5);
    transition:transform .15s,box-shadow .15s;
    display:flex; align-items:center; justify-content:center;
}
#notebookBtn:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(230,81,0,.6); }
#notebookBtn.nb-active { background:linear-gradient(135deg,#bf360c,#e65100); }

#notebookPanel {
    display:none; position:fixed; bottom:80px; right:20px;
    width:520px; height:600px; min-width:320px; min-height:300px;
    background:#0d1117; border:1px solid rgba(255,152,0,.3);
    border-radius:14px; box-shadow:0 8px 40px rgba(0,0,0,.6);
    z-index:9999; overflow:hidden; flex-direction:column;
}
#notebookPanel.nb-open { display:flex; }

/* drag bar */
.nb-drag-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:.35rem .75rem; background:linear-gradient(135deg,#1a1a2e,#16213e);
    border-bottom:1px solid rgba(255,152,0,.2); cursor:move; user-select:none; flex-shrink:0;
}
.nb-drag-label { font-size:.82rem; font-weight:700; color:#ff9800; letter-spacing:.04em; }
.nb-bar-actions { display:flex; gap:.25rem; }
.nb-sz {
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    color:#ccc; border-radius:4px; padding:.12rem .4rem; font-size:.7rem;
    cursor:pointer; font-family:monospace;
}
.nb-sz:hover { background:rgba(255,152,0,.2); color:#ff9800; border-color:rgba(255,152,0,.4); }

/* mode tabs */
.nb-tabs {
    display:flex; flex-shrink:0; background:rgba(255,255,255,.02);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.nb-tab {
    flex:1; padding:.4rem .25rem; background:none; border:none; border-bottom:2px solid transparent;
    color:#777; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .15s;
    text-align:center; white-space:nowrap;
}
.nb-tab:hover { color:#ccc; background:rgba(255,255,255,.03); }
.nb-tab.active { color:#ff9800; border-bottom-color:#ff9800; background:rgba(255,152,0,.06); }

/* toolbar */
.nb-toolbar {
    display:flex; align-items:center; gap:.3rem; padding:.35rem .6rem;
    background:rgba(255,255,255,.02); border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0; flex-wrap:wrap;
}
.nb-tb {
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    color:#aaa; border-radius:6px; padding:.25rem .5rem; font-size:.73rem;
    cursor:pointer; transition:all .15s; white-space:nowrap;
}
.nb-tb:hover { background:rgba(255,152,0,.15); color:#ff9800; border-color:rgba(255,152,0,.3); }
.nb-review { background:rgba(99,179,237,.1); border-color:rgba(99,179,237,.3); color:#63b3ed; }
.nb-review:hover { background:rgba(99,179,237,.2); color:#90cdf4; }
.nb-status { margin-left:auto; border:none; background:none; color:#555; cursor:default; font-size:.7rem; }
.nb-status.ok { color:#66bb6a; }

/* editors — all hidden by default */
.nb-ed { display:none; flex:1; overflow:hidden; position:relative; }
.nb-ed.active { display:flex; flex-direction:column; }

/* shared textarea style */
.nb-ed textarea {
    flex:1; background:#0a0e17; color:#e0e0e0; border:none;
    padding:.6rem; font-family:'JetBrains Mono','Courier New',monospace;
    font-size:.85rem; line-height:1.6; resize:none; outline:none;
}
.nb-ed textarea::placeholder { color:#3a3a4a; }

/* pane labels (Cornell & Quadrant) */
.nb-pane-lbl {
    padding:.2rem .5rem; background:rgba(255,152,0,.08); color:#ff9800;
    font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    border-bottom:1px solid rgba(255,152,0,.15); flex-shrink:0;
}

/* ── Cornell layout ── */
.nb-ed-cornell {
    display:none; flex:1; overflow:hidden;
}
.nb-ed-cornell.active {
    display:grid !important;
    grid-template-columns:32% 68%;
    grid-template-rows:1fr auto;
}
.nb-c-left {
    grid-row:1; grid-column:1;
    display:flex; flex-direction:column;
    border-right:1px solid rgba(255,152,0,.15);
    overflow:hidden;
}
.nb-c-right {
    grid-row:1; grid-column:2;
    display:flex; flex-direction:column;
    overflow:hidden;
}
.nb-c-bottom {
    grid-row:2; grid-column:1 / -1;
    display:flex; flex-direction:column;
    border-top:2px solid rgba(255,152,0,.25);
    max-height:120px;
}
.nb-c-left textarea, .nb-c-right textarea { flex:1; }
.nb-c-bottom textarea { height:60px; min-height:40px; }

/* ── Quadrant layout ── */
.nb-ed-quad {
    display:none; flex:1; overflow:hidden;
}
.nb-ed-quad.active {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
}
.nb-qc {
    display:flex; flex-direction:column; overflow:hidden;
    border-right:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.nb-qc:nth-child(2n) { border-right:none; }
.nb-qc:nth-child(n+3) { border-bottom:none; }
.nb-qc textarea { flex:1; }

/* ── Smart nudge bar ── */
.nb-nudge {
    display:none; padding:.3rem .6rem; background:rgba(255,193,7,.08);
    border-top:1px solid rgba(255,193,7,.15); color:#ffc107;
    font-size:.72rem; flex-shrink:0; line-height:1.4;
}

/* ── Footer ── */
.nb-foot {
    display:flex; justify-content:space-between; align-items:center;
    padding:.2rem .6rem; background:rgba(255,255,255,.02);
    border-top:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
.nb-foot span { font-size:.68rem; font-family:monospace; }
#nbWc { color:#555; }
#nbMl { color:#ff9800; opacity:.6; }

/* ── Pane wrapper for overlay support ── */
.nb-pane-wrap {
    position:relative; flex:1; display:flex; flex-direction:column; overflow:hidden;
}
.nb-pane-wrap textarea { flex:1; }

/* ── Example overlay (hidden by default) ── */
.nb-ex-overlay {
    display:none; position:absolute; inset:0; z-index:10;
    background:rgba(13,17,23,.96); overflow-y:auto;
    padding:.75rem; font-family:'JetBrains Mono','Courier New',monospace;
    font-size:.8rem; line-height:1.55; color:#a0a0b0;
    border:1px solid rgba(255,193,7,.2);
}
.nb-ex-overlay.nb-ex-show { display:block; }
.nb-ex-title {
    color:#ffc107; font-weight:700; font-size:.78rem;
    margin-bottom:.5rem; padding-bottom:.35rem;
    border-bottom:1px solid rgba(255,193,7,.2);
    letter-spacing:.03em;
}
.nb-ex-sec {
    margin-bottom:.6rem; padding-bottom:.5rem;
    border-bottom:1px solid rgba(255,255,255,.04);
}
.nb-ex-sec b { color:#ff9800; font-size:.75rem; }
.nb-ex-sm { font-size:.75rem; padding:.5rem; }
.nb-ex-sm .nb-ex-title { font-size:.72rem; margin-bottom:.35rem; }

/* ── Example toggle button states ── */
.nb-ex-btn { background:rgba(255,193,7,.1); border-color:rgba(255,193,7,.3); color:#ffc107; }
.nb-ex-btn:hover { background:rgba(255,193,7,.2); color:#ffd54f; }
.nb-ex-btn.nb-ex-active { background:rgba(255,193,7,.25); color:#ffd54f; border-color:rgba(255,193,7,.5); }

/* ── Resize handles ── */
.nb-rs { position:absolute; z-index:20; }
.nb-rs.n  { top:0;    left:8px;  right:8px;  height:6px; cursor:n-resize; }
.nb-rs.s  { bottom:0; left:8px;  right:8px;  height:6px; cursor:s-resize; }
.nb-rs.e  { right:0;  top:8px;   bottom:8px; width:6px;  cursor:e-resize; }
.nb-rs.w  { left:0;   top:8px;   bottom:8px; width:6px;  cursor:w-resize; }
.nb-rs.nw { top:0;    left:0;    width:12px; height:12px; cursor:nw-resize; }
.nb-rs.ne { top:0;    right:0;   width:12px; height:12px; cursor:ne-resize; }
.nb-rs.sw { bottom:0; left:0;    width:12px; height:12px; cursor:sw-resize; }
.nb-rs.se { bottom:0; right:0;   width:12px; height:12px; cursor:se-resize; }
.nb-rs.se::after { content:'⟡'; position:absolute; right:3px; bottom:0; color:#555; font-size:.75rem; }
.nb-rs.se:hover::after { color:#ff9800; }

/* ── Mobile ── */
@media(max-width:640px) {
    #notebookPanel { width:calc(100vw - 16px); right:8px; left:8px; height:70vh; }
    #notebookBtn { bottom:16px; right:68px; width:42px; height:42px; font-size:1.15rem; }
    .nb-ed-cornell.active { grid-template-columns:1fr; grid-template-rows:auto 1fr auto; }
    .nb-c-left { border-right:none; border-bottom:1px solid rgba(255,152,0,.15); max-height:120px; }
}

/* ══════════════════════════════════════════════════════════════
   POMODORO TIMER
   ══════════════════════════════════════════════════════════════ */
#pomodoroBtn {
    position:fixed; bottom:24px; right:136px; z-index:9998;
    width:48px; height:auto; min-height:48px; border-radius:24px;
    background:linear-gradient(135deg,#c62828,#ef5350); color:#fff; border:none;
    font-size:1rem; cursor:pointer; padding:.3rem .5rem;
    box-shadow:0 4px 16px rgba(198,40,40,.5);
    transition:transform .15s,box-shadow .15s;
    display:flex; align-items:center; justify-content:center;
    white-space:nowrap;
}
#pomodoroBtn:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(198,40,40,.6); }
#pomodoroBtn.pom-active { background:linear-gradient(135deg,#b71c1c,#c62828); }

#pomodoroPanel {
    display:none; position:fixed; bottom:80px; right:110px;
    width:200px; background:#0d1117; border:1px solid rgba(239,83,80,.3);
    border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.5);
    z-index:9998; padding:1rem; text-align:center;
}
#pomodoroPanel.pom-open { display:block; }

.pom-lbl {
    font-size:.75rem; font-weight:700; letter-spacing:.1em;
    color:#ef5350; margin-bottom:.25rem;
}
#pomodoroPanel.pom-brk .pom-lbl { color:#66bb6a; }

.pom-time {
    font-size:2.5rem; font-weight:700; color:#fff;
    font-family:'JetBrains Mono','Courier New',monospace;
    margin-bottom:.5rem;
}
#pomodoroPanel.pom-brk .pom-time { color:#66bb6a; }

.pom-ctrls { display:flex; gap:.4rem; justify-content:center; margin-bottom:.4rem; }
.pom-btn {
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    color:#ccc; border-radius:8px; padding:.35rem .7rem; font-size:.8rem;
    cursor:pointer; transition:all .15s;
}
.pom-btn:hover { background:rgba(239,83,80,.2); color:#ef5350; border-color:rgba(239,83,80,.4); }

.pom-sess { font-size:.7rem; color:#555; }

@media(max-width:640px) {
    #pomodoroBtn { bottom:16px; right:118px; width:42px; min-height:42px; font-size:.9rem; }
    #pomodoroPanel { right:8px; width:180px; }
}

/* ══════════════════════════════════════════════════════════════
   TUTOR + DASHBOARD NAV BUTTONS
   ══════════════════════════════════════════════════════════════ */
#tutorNavBtn {
    position:fixed; bottom:24px; right:24px; z-index:9998;
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,#1565c0,#42a5f5); color:#fff; border:none;
    font-size:1.3rem; cursor:pointer;
    box-shadow:0 4px 16px rgba(21,101,192,.5);
    transition:transform .15s,box-shadow .15s;
    display:flex; align-items:center; justify-content:center;
}
#tutorNavBtn:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(21,101,192,.6); }

#dashNavBtn {
    position:fixed; bottom:24px; right:192px; z-index:9998;
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,#2e7d32,#66bb6a); color:#fff; border:none;
    font-size:1.3rem; cursor:pointer;
    box-shadow:0 4px 16px rgba(46,125,50,.5);
    transition:transform .15s,box-shadow .15s;
    display:flex; align-items:center; justify-content:center;
}
#dashNavBtn:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(46,125,50,.6); }

@media(max-width:640px) {
    #tutorNavBtn { bottom:16px; right:16px; width:42px; height:42px; font-size:1.15rem; }
    #dashNavBtn { bottom:16px; right:174px; width:42px; height:42px; font-size:1.15rem; }
}

/* ══════════════════════════════════════════════════════════════
   FEEDBACK SYSTEM
   ══════════════════════════════════════════════════════════════ */
#feedbackBtn {
    position:fixed; bottom:24px; right:248px; z-index:9998;
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,#6c63ff,#a78bfa); color:#fff; border:none;
    font-size:1.3rem; cursor:pointer;
    box-shadow:0 4px 16px rgba(108,99,255,.5);
    transition:transform .15s,box-shadow .15s;
    display:flex; align-items:center; justify-content:center;
}
#feedbackBtn:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(108,99,255,.6); }

#feedbackModal {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:10001;
}
#feedbackModal.fb-open { display:flex; align-items:center; justify-content:center; }

.fb-overlay {
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
}
.fb-panel {
    position:relative; z-index:1;
    width:90%; max-width:520px; max-height:85vh; overflow-y:auto;
    background:#161b22; border:1px solid rgba(99,179,237,0.25);
    border-radius:16px; padding:1.5rem;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.fb-title { font-size:1.2rem; font-weight:700; margin-bottom:0.25rem; }
.fb-sub { font-size:0.8rem; color:#a8b4cc; margin-bottom:1.25rem; }

.fb-label {
    display:block; font-size:0.75rem; font-weight:600; color:#63b3ed;
    margin-bottom:0.2rem; margin-top:0.75rem;
}
.fb-input {
    width:100%; background:#0d1117; border:1px solid rgba(255,255,255,0.1);
    border-radius:8px; padding:0.5rem 0.6rem; color:#f0f4ff;
    font-family:'DM Sans',sans-serif; font-size:0.85rem;
    resize:vertical; min-height:50px; max-height:120px;
}
.fb-input:focus { outline:none; border-color:rgba(99,179,237,0.4); }
.fb-input::placeholder { color:#555; }

.fb-stars { display:flex; gap:0.4rem; margin-top:0.3rem; }
.fb-star {
    width:36px; height:36px; border-radius:8px;
    background:#1e2430; border:1px solid rgba(255,255,255,0.1);
    color:#777; font-size:0.9rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.15s;
}
.fb-star:hover { border-color:#fbbf24; color:#fbbf24; }
.fb-star.active { background:rgba(251,191,36,0.15); border-color:#fbbf24; color:#fbbf24; font-weight:700; }

.fb-actions {
    display:flex; gap:0.5rem; align-items:center; margin-top:1.25rem;
    flex-wrap:wrap;
}
.fb-cancel {
    background:transparent; border:1px solid rgba(255,255,255,0.15);
    border-radius:8px; padding:0.5rem 1rem; color:#a8b4cc;
    cursor:pointer; font-size:0.85rem;
}
.fb-cancel:hover { border-color:rgba(255,255,255,0.3); color:#fff; }
.fb-submit {
    background:#63b3ed; border:none; border-radius:8px;
    padding:0.5rem 1.25rem; color:#0d1117; font-weight:600;
    cursor:pointer; font-size:0.85rem;
}
.fb-submit:hover { background:#90cdf4; }
.fb-board-link {
    margin-left:auto; font-size:0.8rem; color:#a78bfa;
    text-decoration:none;
}
.fb-board-link:hover { color:#c4b5fd; text-decoration:underline; }

@media(max-width:640px) {
    #feedbackBtn { bottom:16px; right:230px; width:42px; height:42px; font-size:1.15rem; }
    .fb-panel { width:95%; padding:1rem; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Notebook + Nav Buttons + Feedback
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Nav buttons — smaller, tighter spacing */
    #notebookBtn, #pomodoroBtn, #tutorNavBtn, #dashNavBtn {
        width: 38px; height: 38px; font-size: 1rem;
        bottom: 12px !important;
    }
    #tutorNavBtn { right: 12px !important; }
    #notebookBtn { right: 56px !important; }
    #pomodoroBtn { right: 100px !important; }
    #dashNavBtn { right: 144px !important; }

    /* Notebook panel — full width on mobile */
    #notebookPanel {
        width: calc(100vw - 16px) !important;
        height: 60vh !important;
        right: 8px !important;
        left: 8px !important;
        bottom: 60px !important;
    }

    /* Notebook tabs smaller */
    .nb-tabs { gap: 0; }
    .nb-tab { font-size: 0.7rem; padding: 0.35rem 0.4rem; }

    /* Toolbar wrap */
    .nb-toolbar { flex-wrap: wrap; gap: 3px; padding: 0.3rem; }
    .nb-tb { font-size: 0.65rem; padding: 3px 6px; }

    /* Drag bar compact */
    .nb-drag-label { font-size: 0.7rem; }
    .nb-sz { width: 22px; height: 22px; font-size: 0.6rem; }

    /* Pomodoro panel */
    #pomodoroPanel { right: 8px !important; width: 170px; }
    .pom-time { font-size: 2rem; }

    /* Feedback button */
    #feedbackBtn { width: 34px !important; height: 34px !important; bottom: 56px !important; right: 12px !important; font-size: 0.9rem !important; }

    /* Feedback nudge */
    .fb-nudge { right: 8px !important; bottom: 100px !important; max-width: 220px !important; font-size: 0.75rem; }
}

/* Landing page mobile */
@media (max-width: 600px) {
    .container { padding: 1rem; }
}