/* Base (Mobile-first styles) */
body {
    font-size: 14px;
    padding: 10px;
}

/* Tablet (≥768px) */
@media (min-width: 768px) {
    body {
        font-size: 15px;
        padding: 15px;
    }

    .container {
        max-width: 720px;
    }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
    body {
        font-size: 16px;
        padding: 20px;
    }

    .container {
        max-width: 960px;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Large Desktop (≥1280px) */
@media (min-width: 1280px) {
    body {
        font-size: 18px;
        padding: 25px;
    }

    .container {
        max-width: 1200px;
    }
}

/* Extra Large Screens (≥1600px) */
@media (min-width: 1600px) {
    body {
        font-size: 20px;
        padding: 30px;
    }

    .container {
        max-width: 1400px;
    }
}






#securePdfViewer * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    -moz-user-select: none !important;
}

body,
#questionsContainer,
#securePdfViewer,
#assessmentSection,
#viewbook-chat,
#teacher-chat,
#level2AssessmentSection {
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    pointer-events: auto; /* So buttons still work */
}



@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(255, 0, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

/* AFK pause indicator */

.afk-indicator {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
}

.afk-indicator::before,
.afk-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: #000;
    border-radius: 0;
}
.afk-indicator::before { left: 2px; }
.afk-indicator::after { right: 2px; }







/* ===== Container: only vertical scroll, no horizontal ===== */
.pdf-shell {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; /* block horizontal scroll */
    scrollbar-gutter: stable; /* keep vertical gutter stable */
    --sbw: 14px; /* fallback vertical scrollbar width */
    padding-right: var(--sbw); /* reserve gutter so overlay doesn't cover it */
    background: #fff;
}

.pdf-frame-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.pdf-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ===== Read-only overlay (covers content area only) ===== */
.pdf-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: var(--sbw); /* leave the vertical scrollbar gutter free */
    bottom: 0;
    background: transparent;
    z-index: 3;
    pointer-events: auto; /* block clicks on content/toolbar */
    -webkit-touch-callout: none;
}

/* ===== Bottom zoom controls ===== */
.pdf-controls {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 11; /* above overlay */
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 999px;
    padding: .35rem .6rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    backdrop-filter: blur(2px);
}

.pdf-btn {
    appearance: none;
    border: 0;
    padding: .2rem .6rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    background: #f2f2f2;
    border-radius: 999px;
}

    .pdf-btn:active {
        transform: translateY(1px);
    }

.pdf-zoom-label {
    font-size: .95rem;
    min-width: 70px;
    text-align: center;
}

.pdf-toast {
    position: absolute;
    left: 50%;
    bottom: 56px;
    transform: translateX(-50%);
    background: rgba(0,0,0,.8);
    color: #fff;
    padding: .4rem .7rem;
    border-radius: 10px;
    font-size: .9rem;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    z-index: 15; /* above overlay(3) and controls(12) */
}

    .pdf-toast.show {
        opacity: 1;
    }

:root {
    --layer-gap: 16px;
    --shift: 10%; /* how much layers 3 & 6 shift right on large screens */
}

/* panel */
.glass {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
}

/* subtle hint to scroll */
.scroll-hint {
    font-size: .8rem;
    color: rgba(255,255,255,.7);
    white-space: nowrap;
}

/* RIGHT panel only: fixed height + vertical scroll */
.layers-body {
    padding: 14px 16px;
    height: 70vh; /* fixed panel height */
    display: block;
    overflow-y: auto; /* <-- scroll here only */
    overflow-x: hidden;
}

/* SINGLE-COLUMN STACK — clean vertical order */
.layers-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--layer-gap);
}

/* CARD — compact height (page itself need not scroll) */
.layer-card {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 12px;
    border: 1.5px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    border-radius: 14px;
    padding: 12px; /* compact padding */
    min-height: 80px; /* compact height */
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

    /* RIGHT-SHIFT for 3 & 6 (keeps vertical order) */
    .layer-card.shift-right {
        margin-left: auto; /* align to right edge */
        max-width: calc(100% - var(--shift));
    }

/* Dot rail */
.dot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 40px;
}

.line {
    flex: 1;
    width: 3px;
    background: rgba(255,255,255,.15);
    margin-top: 6px;
}

.dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    background: #121a14;
    z-index: 1;
}

/* UNIQUE dot borders/glows for each layer */
.dot-purple {
    border: 3px solid #8b5cf6;
    box-shadow: 0 0 0 6px rgba(139,92,246,.18);
}
/* L1 */
.dot-blue {
    border: 3px solid #3b82f6;
    box-shadow: 0 0 0 6px rgba(59,130,246,.18);
}
/* L2 */
.dot-cyan {
    border: 3px solid #06b6d4;
    box-shadow: 0 0 0 6px rgba(6,182,212,.20);
}
/* L3 */
.dot-green {
    border: 3px solid #22c55e;
    box-shadow: 0 0 0 6px rgba(34,197,94,.18);
}
/* L4 */
.dot-orange {
    border: 3px solid #f97316;
    box-shadow: 0 0 0 6px rgba(249,115,22,.20);
}
/* L5 */
.dot-pink {
    border: 3px solid #ec4899;
    box-shadow: 0 0 0 6px rgba(236,72,153,.20);
}
/* L6 */

/* main text */
.layer-main {
    flex: 1 1 auto;
    min-width: 0;
    color: #eaf0f8;
}

    .layer-main h5 {
        margin: 0 0 6px;
        color: #fff;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .layer-main p {
        margin: 0;
        color: var(--bs-secondary-color,#b8c0cc);
        font-size: .95rem;
        line-height: 1.28;
    }

/* sub-steps */
.substeps {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    gap: 8px;
    font-size: .94rem;
    color: #cfd6df;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    color: #0b1c12;
}

.chip-l1 {
    background: #c7d2fe;
}

.chip-ai {
    background: #fde68a;
}

.chip-l2 {
    background: #93c5fd;
}

/* CTA row (sits at bottom of scrollable panel) */
.cta-row {
    margin-top: 20px;
    padding-bottom: 24px; /* breathing room above panel edge */
    text-align: center;
}

.cta-caption {
    margin-top: 8px;
    font-size: .85rem;
    color: rgba(255,255,255,.75);
}

/* CTA button */
.btn-choose-colored {
    background: linear-gradient(90deg,#22c55e,#10b981);
    border: none;
    color: #0b1c12;
    font-weight: 800;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(16,185,129,.35);
}

    .btn-choose-colored:hover {
        filter: brightness(1.05);
        box-shadow: 0 8px 22px rgba(16,185,129,.5);
    }

.col-12.col-lg-5 .panel-shell {
    display: flex;
    flex-direction: column;
    /* set a fixed panel height so the body can scroll inside */
    height: 80vh; /* adjust if you want taller/shorter */
    max-height: 90vh;
}

    .col-12.col-lg-5 .panel-shell .panel-head {
        flex: 0 0 auto;
    }

    .col-12.col-lg-5 .panel-shell .layers-body {
        flex: 1 1 auto; /* fill remaining space */
        min-height: 0; /* CRUCIAL: allows overflow in flex child */
        overflow-y: auto; /* enable vertical scroll */
        overflow-x: hidden;
        height: auto; /* let flex control height */
    }

/* LEFT SIDE: increase height only here */
.left-preview .panel-shell {
    display: flex;
    flex-direction: column;
    height: 80vh; /* ↑ make left panel taller */
    max-height: 92vh;
}

.left-preview .panel-head {
    flex: 0 0 auto;
}

.left-preview .img-body {
    flex: 1 1 auto; /* fill remaining height */
    min-height: 0;
    display: flex;
    align-items: center; /* center image vertically */
    justify-content: center;
    padding: 8px;
}

.left-preview .img-frame {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain; /* keep aspect ratio inside taller box */
    display: block;
}



/* RESPONSIVE — remove right shift on small screens for full-width look */
@media (max-width: 992px) {
    : root {
        --shift: 0%;
    }

    .layer-card.shift-right {
        max-width: 100%;
    }

    .layer-card {
        flex-wrap: wrap;
    }
}



#assessmentBtn.btn-no-style {
    display: inline-block; /* Inline style */
    background-color: #ffffff; /* White background */
    color: #007BFF; /* Bootstrap blue text */
    border: 2px solid #007BFF; /* Solid blue outer border */
    border-radius: 6px;
    padding: 0.4rem 1rem;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none;
    text-align: center;
}
#assessmentBtn.btn-no-style:hover {
        border-color: #0056b3;
        color: #0056b3;
        background-color: #f8fbff; /* subtle hover background */
    }

#assessmentBtn.btn-no-style:focus {
        outline: none;
        box-shadow: none;
    }

 #assessmentBtn.btn-no-style:active {
        border-color: #003d80;
        color: #003d80;
        background-color: #e6f0ff;
    }

.custom-radio-wrap {
    border-radius: 8px;
    padding: 6px 12px;
    transition: background 0.3s ease;
}

.bg-success {
    background-color: #d4edda !important;
    border-left: 4px solid #28a745;
}

.bg-danger {
    background-color: #f8d7da !important;
    border-left: 4px solid #dc3545;
}












#chat-container {
    width: 100%; /* ✅ Allow Bootstrap col to control width */
    max-width: 100%;
    border-radius: 10px;
    background-color: #eaecee;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
}


#chat-history {
    height: 473px;
    overflow-y: auto;
    padding: 10px;
}

.chat-inner {
    max-width: 700px; /* Limit total width */
    margin: 0 auto; /* Center the chat content */
}







iframe, #chat-container {
    flex: 1; /* Allows both iframe and chat container to fill the parent's height */
    overflow: auto; /* Adds scroll bars if content exceeds the container size */
}


#mainImage {
    width: 200%; /* Ensures the image takes the full width of its container */
    max-height: 80vh; /* Adjust the max-height as needed to fit your layout */
    object-fit: contain; /* Ensures the image scales proportionally */
}

.message {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    margin-bottom: 10px;
}


    .message.user {
        justify-content: flex-end;
    }

    .message.bot {
        justify-content: flex-start;
    }

    .message .bubble {
        margin-top: 30px;
        padding: 15px 15px;
        border-radius: 50px;
        max-width: 70%;
        font-size: 16px;
        word-wrap: break-word;
        line-height: 1.4;
    }

    .message.user .bubble {
        background-color: #a74afb;
        color: white;
        border-bottom-right-radius: 4px;
    }

    .message.bot .bubble {
        background-color: #dee1e6;
        color: black;
        border-bottom-left-radius: 4px;
    }

.bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 16px;
    line-height: 1.4;
    background-color: #f1f0f0;
    color: #000;
    /* 💥 KEY: force content to wrap and prevent overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    justify-content: center;
    text-align: justify;
    overflow-x: hidden;
}

.katex {
    max-width: 100%;
    overflow-x: auto;
    white-space: normal;
    word-break: break-word;
}

.bubble code {
    white-space: pre-wrap; /* wrap long inline code */
    word-break: break-word;
}




.message .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.message.user .avatar {
    margin-left: 10px;
    order: 2;
}

.message.bot .avatar {
    margin-right: 10px;
    order: 1;
}




.message img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

#chat-container:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px; /* Width of the "book spine" border */
    background-color: #fff; /* Background color of the "book spine" */
}

#chat-container:before {
    left: -2px; /* Adjust to overlap the right border */
    border-top-left-radius: 10px; /* Rounded corner on top */
    border-bottom-left-radius: 10px; /* Rounded corner on bottom */
}

.user .img {
    margin-left: 10px;
}

.bot .img {
    margin-right: 10px;
}

#user-input {
    flex-grow: 1;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

#user-input {
    flex-grow: 1;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#send-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* circular click area like WhatsApp */
    transition: transform 0.2s ease;
}

    /* Remove any tap/click highlight (especially on mobile) */
    #send-btn:focus {
        outline: none;
    }

    #send-btn:focus-visible {
        outline: none;
    }

    #send-btn::-moz-focus-inner {
        border: 0;
    }

#send-icon,
#voice-icon {
    color: black;
    font-size: 30px;
    line-height: 1;
    display: inline-block;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 30px; /* 👈 space to the right of the icon */
    padding-top: 10px;
}


/* WhatsApp-style rotation on send */
#send-icon {
    transform: rotate(50deg);
    display: none;
}

#clear-btn {
    margin-left: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 16px;
    color: white;
    border: none;
    cursor: pointer;
}

.chat-input-container {
    position: relative;
}

#user-input {
    padding-right: 100px; /* Adjust padding to prevent text from hiding behind buttons */
}

.input-group-append {
    right: 10px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}




.thumbnail {
    width: 150%;
    /* Set max-width for thumbnails */
    height: auto;
    cursor: pointer;
    margin: 8px auto;
    border: 2px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
}

    .thumbnail:hover {
        transform: scale(1.05);
        border-color: #007bff;
    }

#image-viewer img {
    width: 350%; /* Ensure the main image is responsive */
    height: auto;
    display: block; /* Remove bottom space/gap */
}

#thumbnails {
    overflow-y: auto; /* Add scroll to the thumbnail container */
    height: 90vh; /* Limit height to encourage scrolling */
}



/* #pdf-viewer { */
/*     width: 40%; /* Adjust this percentage to change the PDF viewer size */ */
/* } */
#chat-container {
    width: 10%; /* Adjust this percentage to change the chat container size */
    border-radius: 10px;
}



#chat-history {
    height: 538px;
    overflow-y: auto;
   
}

.chat-input-container textarea {
    height: 70px;
}

.input-group-append {
    right: 10px;
    bottom: 10px;
}

#preview-frame {
    min-height: 600px; /* Set a minimum height for the iframe */
}

#user-input {
    border: 1px solid black;
    outline: none; /* 🔴 Removes blue focus ring */
    border-radius: 30px;
    padding: 10px 16px;
    color: black;
    width: 100%;
    resize: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional: custom grow effect on focus */
    #user-input:focus {
        box-shadow: 0 0 5px rgba(37, 211, 102, 0.4); /* soft green glow */
        transform: scale(1.01); /* slightly larger */
    }

.chat-input-container {
    position: relative; /* Required for button's absolute position to work */
    border-radius: 30px;
    margin-top: 70px;
}

#thumbnails {
    display: flex;
    flex-direction: column;
    max-height: 100vh; /* Adjust the height as needed */
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.thumbnail {
    width: 150%; /* Make images responsive */
    max-width: 540px; /* Adjust as needed */
    margin-bottom: 10px; /* Space between thumbnails */
}

/* Optional: To center the images */
#thumbnails {
    align-items: center;
}

#image-container {
    overflow: hidden;
    position: relative;
}

#mainImage {
    transition: transform 0.25s ease;
    cursor: grab;
}

#controls {
    margin-top: 10px;
    text-align: center;
}

.control-btn {
    padding: 5px 10px;
    margin: 0 5px;
    cursor: pointer;
}

.katex .mroot, .katex .mord {
    max-width: 100%;
    overflow-x: auto;
}

.katex .sqrt {
    max-width: 100%;
    overflow-x: auto;
}

#pdf-container {
    overflow: hidden;
}

#allPagesPdf {
    border: none !important;
    outline: none;
    display: block;
}

#pdf-viewer {
    background-color: #eaecee;
}


.toggle-image {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

    .toggle-image.active {
        transform: scale(1.2);
    }

/* --- Timestamp: smaller and tighter gap --- */
.tc-bubble small {
    display: block;
    margin-top: 2px !important; /* was mt-2 (~8px) */
    font-size: 12px;
    opacity: 0.75; /* softer than full gray */
}



/* Chat wrapper keeps things column-flex and responsive */
.tc-wrapper {
    height: 100%;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    margin-inline: auto; /* center on small screens */
}

/* Messages */
.tc-message {
    display: flex; /* keeps bubble content in a row layout */
    align-items: flex-end; /* aligns bubble to the bottom (for multiple items) */
    margin: 5px 0; /* reduced from 10px to 5px to decrease vertical spacing */
    max-width: 100%; /* full width container */
    padding: 0 10px; /* horizontal padding */
}


.left-msg {
    justify-content: flex-start;
}

.right-msg {
    justify-content: flex-end;
}

.tc-bubble {
    background-color: #f1f3f7;
    padding: 8px 12px; /* reduced padding for smaller height */
    border-radius: 18px;
    font-size: 15px;
    line-height: 0.4; /* tighter vertical spacing */
    max-width: 75%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}


.left-msg .tc-bubble {
    background-color: #d7ccd7;
    border-bottom-left-radius: 4px;
    color: #111;
}

.right-msg .tc-bubble {
    background-color: #a74afb;
    border-bottom-right-radius: 4px;
    color: #fff;
}



/* Sticky input footer (inside the right column) */
.message-input-container {
    position: sticky; /* stays at bottom of the column */
    bottom: 0;
    background: #fff; /* white background */
    padding: 12px 14px;
    border-top: 1px solid #e9ecef;
    z-index: 5;
}

/* Rounded, pill-like input box */
.message-input-box {
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid #dcdfe3;
    border-radius: 20px; /* << curved edges */
    padding: 6px 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Textarea */
.message-input-field {
    width: 100%;
    height: 44px;
    max-height: 160px;
    border: none;
    outline: none;
    resize: none; /* JS can auto-grow if you like */
    background: transparent; /* so the rounded parent shows through */
    padding: 8px 44px 8px 10px;
    font-size: 16px;
    line-height: 1.4;
    color: #111;
}

/* Send button inside the rounded box */
.message-send-button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(27deg);
    height: 32px;
    width: 32px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.message-send-icon {
    width: 30px;
    height: 30px;
}


/* -------- Responsive tweaks -------- */
@media (max-width: 992px) {
    .tc-bubble {
        max-width: 85%;
    }
}

@media (max-width: 576px) {
    .tc-bubble {
        max-width: 95%;
        font-size: 14px;
    }

    .message-input-field {
        font-size: 15px;
    }
}





input[type="radio"].correct:checked + label {
    color: green !important;
    font-weight: bold;
}

input[type="radio"].incorrect:checked + label {
    color: red !important;
    font-weight: bold;
}

.analog-timer {
    width: 40px;
    height: 40px;
    
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent; /* Transparent center */
}

.inner-icon {
    font-size: 3rem; /* Clock icon size */
    color: #6c757d; /* Muted dark for realism */
}

@keyframes shake {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(-2px, 2px);
    }

    50% {
        transform: translate(2px, -2px);
    }

    75% {
        transform: translate(-2px, 2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Apply shake animation */
.analog-timer.shake {
    animation: shake 0.5s ease-in-out;
}



html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* prevent horizontal scroll */
  
}

.tc-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 4px;
    transform: translateX(20px);
}

.tc-teacher-info {
    display: flex;
    justify-content: flex-start; /* Adjust as needed */
    align-items: center;
    gap: 10px; /* Adjust the gap between teacher and subject */
}

    .tc-teacher-info span {
        white-space: nowrap; /* Prevent text from wrapping */
    }



.container-fluid,
.row,
#viewbook-chat,
.chat-input-container,
#inputContainer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

main {
    margin-bottom: 0 !important;
}


.btn-outline-purple {
    color: purple;
    border: 1px solid purple;
    background-color: transparent;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}

.btn-outline-purple:hover {
    background-color: purple;
    color: white;
}


.option-wrap {
    display: flex;
    align-items: flex-start;
}

.option-wrap .form-check-input {
    margin-top: 0.3rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.option-wrap .form-check-label {
    white-space: normal;
    line-height: 1.5;
}


.assessment-footer {
    position: sticky;
    bottom: 0;
    background-color: white;
    z-index: 10;
    padding-bottom: 1rem;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
}

.custom-radio .form-check-input:checked + .form-check-label {
    background-color: #e7f3ff;
    font-weight: bold;
    border-left: 4px solid #007bff;
    padding-left: 8px;
    border-radius: 5px;
}


.score-action-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    width: 730px;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

/* Intro */

/* ===== Responsive AI Theme ===== */
:root {
    --ai-bg1: #0b1020;
    --ai-bg2: #0f172a;
    --ai-bg3: #111827;
    --ai-violet: #8b5cf6;
    --ai-green: #22c55e;
    --ai-cyan: #38bdf8;
    --glass-bg: rgba(255,255,255,.08);
    --glass-brd: rgba(255,255,255,.14);
    --soft-brd: rgba(255,255,255,.10);
}
/* Full-screen hero with animated “aurora” */
.ai-hero {
    position: relative;
    isolation: isolate;
    min-height: 90vh;
    display: flex;
    align-items: center;
    color: #e5e7eb;
    background: radial-gradient(1200px 650px at 8% 15%, rgba(99,102,241,.22), transparent 60%), radial-gradient(1000px 700px at 92% 10%, rgba(34,197,94,.18), transparent 60%), linear-gradient(135deg, var(--ai-bg2) 0%, var(--ai-bg3) 50%, var(--ai-bg1) 100%);
    overflow: hidden;
}
    /* Animated aurora layer */
    .ai-hero::before {
        content: "";
        position: absolute;
        inset: -20%;
        background: radial-gradient(40% 60% at 20% 30%, rgba(99,102,241,.22), transparent 60%), radial-gradient(35% 55% at 80% 25%, rgba(56,189,248,.16), transparent 60%), radial-gradient(50% 70% at 60% 80%, rgba(34,197,94,.14), transparent 60%);
        filter: blur(40px);
        animation: auroraShift 18s ease-in-out infinite alternate;
        z-index: -1;
    }

@keyframes auroraShift {
    0% {
        transform: translate3d(0,0,0) scale(1);
        opacity: .9;
    }

    50% {
        transform: translate3d(-2%, -2%, 0) scale(1.03);
        opacity: .95;
    }

    100% {
        transform: translate3d(2%, 1.5%, 0) scale(1.06);
        opacity: .9;
    }
}

/* Floating “neural” orbs */
.orb {
    position: absolute;
    width: 16vmin;
    height: 16vmin;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.02));
    box-shadow: inset 0 0 40px rgba(255,255,255,.08);
    mix-blend-mode: screen;
    filter: blur(1px);
    opacity: .35;
    pointer-events: none;
}

    .orb.violet {
        background: radial-gradient(circle at 35% 35%, rgba(139,92,246,.35), rgba(139,92,246,.05));
    }

    .orb.cyan {
        background: radial-gradient(circle at 35% 35%, rgba(56,189,248,.35), rgba(56,189,248,.05));
    }

    .orb.green {
        background: radial-gradient(circle at 35% 35%, rgba(34,197,94,.35), rgba(34,197,94,.05));
    }

    .orb.one {
        top: -6vmin;
        left: 8vmin;
        animation: floaty 19s ease-in-out infinite;
    }

    .orb.two {
        top: 14vmin;
        right: 6vmin;
        animation: floaty 23s ease-in-out infinite reverse;
    }

    .orb.three {
        bottom: -8vmin;
        left: 12vmin;
        animation: floaty 21s ease-in-out infinite;
    }

@keyframes floaty {
    0% {
        transform: translate3d(0,0,0) scale(1);
    }

    50% {
        transform: translate3d(0,-2.5vmin,0) scale(1.05);
    }

    100% {
        transform: translate3d(0,0,0) scale(1);
    }
}

/* Glass card */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    border-radius: 1.25rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Badges / bits */
.badge-soft {
    background: rgba(139,92,246,.18);
    color: #d6ccff;
    border: 1px solid rgba(139,92,246,.35);
}

.icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--soft-brd);
}

/* Typographic responsiveness */
h1.display-5 {
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
}

.lead {
    font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
}

/* Subtle divider */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}

.btn-ai-overview {
    background: linear-gradient(90deg, var(--ai-violet), var(--ai-cyan));
    color: white;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-ai-overview:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139,92,246,.3);
    color: white;
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ai-hero::before, .orb {
        animation: none !important;
    }
}

/* Utils used in markup */
.tick {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Overview */

.panel-shell {
    display: flex;
    flex-direction: column;
    height: 76vh; /* equal height for both columns */
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.panel-head {
    background: linear-gradient(90deg,#8b5cf6,#22c55e);
    color: #fff;
    font-weight: 700;
    padding: 10px 14px;
    flex-shrink: 0;
}

.panel-body {
    flex: 1;
    overflow: hidden;
}

/* LEFT image */
.img-body {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-frame {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* Mobile */
@media (max-width: 992px) {
    .panel-shell {
        height: auto;
    }

    .layers-grid {
        grid-template-rows: auto;
    }
}

/* RESPONSIVE — remove right shift on small screens */
@media (max-width: 992px) {
    : root {
        --shift: 0%;
    }

    .layer-card.shift-right {
        max-width: 100%;
    }

    .layer-card {
        flex-wrap: wrap;
    }

    .layer-sub {
        flex: 1 1 100%;
        margin-left: 0;
        padding-left: 0;
        margin-top: 12px;
        border-left: 0;
        border-top: 1px dashed rgba(255,255,255,.18);
        padding-top: 12px;
    }
}

/* level1 assessment */
/* Make each option a flex row: radio button stays left, text wraps */
.option-card {
    display: flex;
    align-items: flex-start; /* align radio with first line of text */
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: .5rem .75rem;
    width: 100%;
}

    /* Radio button stays fixed */
    .option-card input[type="radio"] {
        margin-top: 4px; /* align with first text line */
        flex-shrink: 0;
    }

/* The letter badge (A., B., etc.) */
.badge-letter {
    font-weight: bold;
    min-width: 20px;
}

/* Wrap long text cleanly */
.option-text {
    flex: 1;
    white-space: normal; /* allow wrapping */
    word-wrap: break-word;
}

#scoreSummary.bg-success {
    background-color: #28a745 !important; /* Bright green */
    color: #fff !important; /* White text */
}

#scoreSummary.bg-danger {
    background-color: #dc3545 !important; /* Bright red */
    color: #fff !important; /* White text */
}



.option-card.correct {
    border-color: #198754;
    background: #eaf6ef;
}

.option-card.wrong {
    border-color: #dc3545;
    background: #fbe9eb;
}

.option-card .mark {
    position: absolute;
    right: .5rem;
    top: .35rem;
    font-weight: 700;
}








.options-grid.is-missing {
    box-shadow: 0 0 0 .15rem rgba(220,53,69,.35);
}










.chapter-list.two-line .chapter-btn {
    --btn-h: 60px;
    height: var(--btn-h);
    min-height: var(--btn-h);
    max-height: var(--btn-h);
}

.chapter-list.two-line .chapter-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* clamp to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal; /* allow wrapping */
}



/* --- Responsive tweaks --- */
@media (max-width: 992px) { /* lg breakpoint */
    .panel-shell {
        margin-bottom: 14px;
    }
}

@media (max-width: 576px) { /* xs phones */
    .panel-body {
        padding: .9rem .9rem;
    }

    .layer-card {
        gap: 10px;
    }

    .dot-wrap {
        width: 28px;
        flex-basis: 28px;
    }

    .dot {
        width: 24px;
        height: 24px;
        font-size: .85rem;
    }

    .line {
        left: 12px;
        top: 28px;
    }

    .layer-card.is-sub .layer-text {
        margin-left: 6px;
        padding-left: 10px;
    }
}