/* ########################## Draggable panel ########################## */
.draggable-panel {
    position: fixed;
    z-index: 10000;
    width: 300px;
    background: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    box-shadow: 6px 6px 0 var(--dark);
    user-select: none;
    overflow: hidden;
    font-family: var(--inter);
    color: var(--dark);
}

.draggable-handle {
    cursor: grab;
    padding: .5rem .75rem;
    background: var(--teal);
    color: var(--beige);
    display: flex;
    align-items: center;
    gap: .5rem;
    touch-action: none;
    border-bottom: 2px solid var(--dark);
}

.draggable-handle:active { cursor: grabbing; }

/* 2x3 dot grid to signal the panel is draggable */
.drag-grip {
    flex: 0 0 auto;
    width: 10px;
    height: 15px;
    background-image: radial-gradient(currentColor 1.1px, transparent 1.4px);
    background-size: 5px 5px;
    background-position: 0 1px;
    opacity: .65;
}

.overlay-title { font-weight: bold; font-size: 1rem; }

/* Collapse toggle sits at the far right of the handle (matches .reset-btn) */
.panel-collapse-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--beige);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.panel-collapse-btn:hover { background: rgba(255, 255, 255, .18); }

/* A sibling .reset-btn already claims margin-left:auto, so only push when solo */
.draggable-handle > .reset-btn + .panel-collapse-btn { margin-left: 0; }

.draggable-body {
    padding: 1rem;
    max-height: 80vh;
    overflow: hidden;
    transition: max-height .2s ease, padding .2s ease, opacity .2s ease;
}

/* Collapsed: only the handle remains, body folds away smoothly */
.draggable-panel.collapsed .draggable-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* Wider than the 300px default: Ask, Send and Cancel share one row now, and with the keyboard
   hint on Send they need the extra room or Cancel drops to a second line. */
.feedback-overlay.student { background: #fde2e4; width: 360px; }
.feedback-overlay.student .draggable-body { padding: .85rem; }

/* Centered axis caption above each slider (mirrors the teacher chart labels) */
.axis-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: .35rem;
}

/* ########################## Sliders ########################## */
.slider-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
}

.slider-row .emoji { font-size: 22px; line-height: 1; }

.slider-row .fb-slider { flex: 1; min-width: 0; margin: 0; }

/* Track: same flat 4px height on both the filled and unfilled portions */
.slider-row .fb-slider .mud-slider-filled { height: 4px; background-color: var(--teal); }
.slider-row .fb-slider .mud-slider-input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background-color: rgba(57, 53, 82, .25);
}
.slider-row .fb-slider .mud-slider-input::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background-color: rgba(57, 53, 82, .25);
}

/* Thumb: keep MudBlazor's built-in circular thumb, just recolor it */
.slider-row .fb-slider .mud-slider-input::-webkit-slider-thumb { background-color: var(--teal); }
.slider-row .fb-slider .mud-slider-input::-moz-range-thumb { background-color: var(--teal); }

/* Ticks: small round dots */
.slider-row .fb-slider .mud-slider-track-tick {
    width: 6px;
    height: 6px;
    background-color: var(--dark);
}

/* ########################## Ask a question ########################## */
.ask-section {
    margin-top: .85rem;
    padding-top: .7rem;
    border-top: 2px solid rgba(57, 53, 82, .15);
}

.ask-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Mirrors the teacher's Ask launcher (.tb-launcher) so the two "ask" affordances read the same. */
.ask-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--ekwarg);
    background: var(--purple);
    color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    padding: .35rem 1rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--dark);
    transition: transform .08s ease, box-shadow .08s ease;
}

.ask-btn:hover { transform: translate(-1px, -1px); }

.ask-btn:active {
    box-shadow: 1px 1px 0 var(--dark);
    transform: translate(2px, 2px);
}

/* Held open rather than momentarily pressed: the shallower shadow carries that on its own. Moving
   it as well dropped it out of line with Send and Cancel, which sit beside it now. */
.ask-btn.active {
    box-shadow: 1px 1px 0 var(--dark);
}

.ask-box { margin-top: .75rem; }

.ask-box textarea {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--beige);
    color: var(--dark);
    font-family: var(--ekwarg);
    font-style: italic;
    padding: var(--padding-box);
    outline: none;
}

.ask-box textarea:focus { border-color: var(--red); }
.ask-box textarea::placeholder { color: var(--dark); opacity: .55; }

/* Beats the global .submitBtn width so Send sits at its own size beside Ask. */
/* The shortcut label is the widest thing in this row, so the button trims its own padding for it. */
.ask-send { width: auto; padding-inline: .6rem; gap: .35rem; }

/* One height for the three, since they come from three different button families with different
   padding and fonts. Cheaper than reconciling their metrics. */
.ask-row .ask-btn,
.ask-row .ask-send,
.ask-row .ask-cancel {
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cancelBtn {
    background: transparent;
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    padding: var(--padding-box);
    cursor: pointer;
    font-family: var(--inter);
    font-weight: bold;
    font-size: 1rem;
    color: var(--dark);
    transition: all .2s ease-in-out;
}

.cancelBtn:hover { background: var(--dark); color: var(--beige); }

/* Only here: elsewhere Cancel sits beside Delete and must not shout louder than it. */
.ask-cancel {
    box-shadow: 3px 3px 0 var(--dark);
    transition: transform .08s ease, box-shadow .08s ease, background .2s ease-in-out, color .2s ease-in-out;
}

/* A dark fill would swallow its own shadow, so hover stays a light tint. */
.ask-cancel:hover {
    background: color-mix(in srgb, var(--dark) 10%, transparent);
    color: var(--dark);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--dark);
}

.ask-cancel:active {
    background: var(--dark);
    color: var(--beige);
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--dark);
}

.ask-sent { color: var(--teal); font-weight: bold; font-size: .9rem; }

/* ########################## Teacher overlay (Phase 5) ########################## */
.feedback-overlay.teacher { width: 320px; }
.feedback-overlay.teacher .draggable-body { padding: .85rem; }

.reset-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--beige);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.reset-btn:hover { background: rgba(255, 255, 255, .18); }

/* Each axis is a self-contained mini bar chart */
.fb-bar {
    background: rgba(57, 53, 82, .04);
    border: 1px solid rgba(57, 53, 82, .12);
    border-radius: var(--border-radius);
    padding: .55rem .65rem .45rem;
    margin-bottom: .65rem;
}

.fb-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: .5rem;
}

.fb-label .fb-emoji { font-size: 15px; line-height: 1; }
.fb-label .fb-text { text-align: center; }

.fb-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    border-bottom: 2px solid rgba(57, 53, 82, .25);
}

.fb-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* Fixed-height column slot so empty bars still read as part of the chart */
.fb-track {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: flex-end;
    background: rgba(57, 53, 82, .06);
    border-radius: 4px 4px 0 0;
}

.fb-fill {
    width: 100%;
    background: var(--teal);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height .25s ease;
}

.fb-step.leader .fb-count { font-weight: 700; color: var(--teal); }

.fb-count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

/* ---- Questions ---- */
.question-queue {
    margin-top: .85rem;
    padding-top: .7rem;
    border-top: 2px solid rgba(57, 53, 82, .15);
    max-height: 220px;
    overflow-y: auto;
}

.queue-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .5rem;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.queue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--teal);
    color: var(--beige);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.queue-empty {
    margin: 0;
    font-size: 12px;
    font-style: italic;
    opacity: .55;
}

.question-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    background: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    padding: 6px 8px;
    margin-bottom: 6px;
}
.q-text { font-size: 13px; line-height: 1.3; }
.q-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    opacity: .55;
    transition: opacity .15s ease, background .15s ease;
}
.q-close:hover { opacity: 1; color: var(--red); background: rgba(57, 53, 82, .08); }

/* ########################## Phone ##########################
   Not draggable and not floating: it takes its place in the column under the status bar, which is
   what StudentSession orders it into. !important because DraggablePanel carries an inline
   top/right for its desktop anchor, and nothing else outranks that. */
@media (max-width: 640px) {
    .feedback-overlay.student {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        /* The column centres its children, so without this it shrinks to its contents. The margin
           lines it up with the status bar, which the shared shell insets by the same amount. */
        align-self: stretch;
        margin: 0 1rem;
        box-shadow: 3px 3px 0 var(--dark);
    }

    .feedback-overlay.student .draggable-handle {
        cursor: default;
        /* It stopped being a drag handle here, and while it claimed the gesture a swipe starting
           on it scrolled nothing. */
        touch-action: auto;
    }

    /* The grip promises a drag that no longer happens here. */
    .feedback-overlay.student .drag-grip {
        display: none;
    }
}