/* ABA Exam — Responsive Styles */

:root {
    --aba-header-h: 64px;
    --aba-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 1024px) {
    .aba-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .aba-corridor { height: 300px; }
    .aba-door-frame { width: 55px; height: 110px; }
    .aba-ultrasound-station { flex-direction: column; }

    .aba-soe-sidebar { width: 200px; padding: 16px 12px; }
}

/* Dashboard: mobile — sidebar becomes slide-in menu from left */
@media (max-width: 900px) {
    /* Full simulator only — landing page embed keeps stats in header */
    .aba-dashboard-view--simulator {
        --aba-dashboard-stats-dock-h: calc(46px + env(safe-area-inset-bottom, 0px));
    }

    .aba-sidebar-toggle {
        display: flex;
    }

    .aba-dashboard-view .aba-header {
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 8px 12px;
        height: auto;
        min-height: 64px;
        align-items: center;
    }
    .aba-dashboard-view .aba-header-logo {
        flex: 0 1 auto;
        min-width: 0;
    }
    /* Title block: title one line; subtitle up to two lines */
    .aba-dashboard-view .aba-header-logo > div {
        min-width: 0;
        overflow: hidden;
    }
    .aba-dashboard-view .aba-header-title {
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .aba-dashboard-view .aba-header-subtitle {
        font-size: 9px;
        line-height: 1.25;
        opacity: 0.72;
        margin-top: 2px;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    /* Stats strip: fixed to bottom of viewport (header stays title + menu only) */
    .aba-dashboard-view--simulator .aba-header-study-tools {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 102;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: #2d3238;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    }
    .aba-dashboard-view--simulator .aba-header-study-tools::-webkit-scrollbar {
        display: none;
    }
    .aba-dashboard-view--simulator .aba-header-tool {
        font-size: 9px;
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.95);
        font-weight: 600;
    }
    .aba-dashboard-view--simulator .aba-header-tool-icon {
        width: 15px;
        height: 15px;
        min-width: 15px;
        min-height: 15px;
        max-width: 15px;
        max-height: 15px;
        opacity: 1;
        color: rgba(255, 255, 255, 0.98);
    }

    .aba-dashboard-view .aba-exam-type-duration .aba-duration-icon {
        width: 11px;
        height: 11px;
        min-width: 11px;
        min-height: 11px;
        max-width: 11px;
        max-height: 11px;
    }

    .aba-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .aba-dashboard-view.aba-sidebar-open .aba-sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .aba-dashboard-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        min-width: 280px;
        max-width: 85vw;
        z-index: 1001;
        flex-shrink: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
        border-right: 1px solid rgba(255,255,255,0.08);
    }

    .aba-dashboard-view.aba-sidebar-open .aba-dashboard-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    }

    .aba-sidebar-close {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: rgba(255,255,255,0.1);
        border: none;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .aba-sidebar-close:hover {
        background: rgba(255,255,255,0.18);
    }

    .aba-sidebar-history {
        padding: 54px 14px 14px 12px;
    }

    /* Mobile: hover actions always visible (no hover on touch) */
    @media (hover: none) {
        .aba-history-hover-actions {
            opacity: 1;
        }
        .aba-history-bookmark-btn,
        .aba-history-delete-btn {
            width: 32px;
            height: 32px;
            min-width: 32px;
            min-height: 32px;
        }
    }

    .aba-sidebar-user {
        padding: 10px 12px;
    }

    .aba-user-menu {
        bottom: 100%;
        top: auto;
        left: 12px;
        right: 12px;
        margin-top: 0;
        margin-bottom: 4px;
        transform: translateY(6px);
    }

    .aba-user-menu[aria-hidden="false"] {
        transform: translateY(0);
    }

    .aba-dashboard-content {
        padding: 14px 16px;
    }

    .aba-dashboard-view .aba-dashboard-content {
        justify-content: center;
        overflow-y: auto;
    }
    /* Scroll past fixed stats dock; no sticky footer — sticky caused Start to paint over cards on short viewports */
    .aba-dashboard-view--simulator .aba-dashboard-content {
        padding-bottom: calc(var(--aba-dashboard-stats-dock-h) + 24px);
    }
    .aba-dashboard-view .aba-dashboard-section {
        justify-content: center;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }
    .aba-dashboard-cards-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "soe osce"
            "practice-soe practice-osce"
            "full full";
        max-height: none;
        flex: 0 1 auto;
        align-content: start;
    }
    .aba-dashboard-view .aba-dashboard-cards-grid {
        gap: 6px;
    }

    .aba-dashboard-cards-grid .aba-exam-type-card {
        padding: 6px 8px;
        gap: 6px;
        align-items: flex-start;
        align-self: start;
    }
    .aba-dashboard-view .aba-dashboard-cards-grid .aba-full-exam-card .aba-exam-type-content {
        justify-content: flex-start;
        gap: 4px;
    }
    .aba-dashboard-view .aba-dashboard-cards-grid .aba-exam-type-duration {
        margin-top: 4px;
    }
    .aba-dashboard-view .aba-dashboard-cards-grid .aba-full-exam-breakdown {
        margin-top: 4px;
        padding-top: 4px;
        gap: 2px;
    }

    .aba-dashboard-view--simulator .aba-dashboard-footer {
        position: static;
        flex-shrink: 0;
        margin-top: 12px;
        padding-top: 12px;
        border-top: none;
        background: transparent;
    }

    .aba-full-exam-breakdown {
        margin-top: 4px;
        padding-top: 4px;
        gap: 2px;
    }

    .aba-breakdown-row {
        font-size: 9px;
    }

    .aba-exam-cards-grid .aba-exam-type-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
    }

    .aba-exam-cards-grid .aba-exam-type-name {
        font-size: 12px;
    }

    .aba-exam-cards-grid .aba-exam-type-desc {
        font-size: 10px;
    }

    .aba-dashboard-footer {
        flex-direction: column;
        align-items: stretch;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .aba-exam-app { border-radius: 0; }

    .aba-header {
        padding: 14px 16px;
        flex-direction: column;
        gap: 10px;
    }
    .aba-dashboard-view .aba-header {
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 8px 10px;
        height: auto;
        min-height: 64px;
        gap: 0;
    }

    .aba-header-phase {
        font-size: 12px;
        padding: 6px 14px;
    }

    .aba-grid-2,
    .aba-grid-3 {
        grid-template-columns: 1fr;
    }

    .aba-card { padding: 20px; }

    .aba-btn-lg {
        padding: 14px 28px;
        font-size: 15px;
    }

    .aba-clipboard {
        padding: 40px 20px 30px;
    }

    .aba-clipboard-paper {
        padding: 20px;
    }

    /* SOE Prep — compact on mobile */
    .aba-prep-header { padding: 10px 16px; }
    .aba-prep-header-left .aba-header-logo-icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
    .aba-prep-title { font-size: 14px; }
    .aba-prep-body { padding: 12px 16px 16px; }
    .aba-prep-toolbar { flex-wrap: wrap; gap: 8px; }
    .aba-prep-case-inner { padding: 16px 18px 20px; }
    .aba-case-tabs { gap: 8px; margin-bottom: 14px; padding: 6px; }
    .aba-case-tab {
        padding: 8px 12px 10px;
        min-height: 40px;
        gap: 6px;
    }
    .aba-case-tab-icon { width: 18px; height: 18px; }
    .aba-case-tab-icon svg { width: 15px; height: 15px; }
    .aba-case-tab-label { font-size: 11px; line-height: 1.25; }

    .aba-corridor { height: 220px; }
    .aba-corridor-doors { left: 30px; right: 30px; }
    .aba-corridor-wall-left,
    .aba-corridor-wall-right { width: 30px; }
    .aba-door-frame { width: 40px; height: 80px; }
    .aba-door-number { font-size: 9px; padding: 2px 6px; }

    /* OSCE corridor view — mobile: doors as horizontal slider, active in front */
    #aba-view-osce-corridor .aba-header {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }
    #aba-view-osce-corridor .aba-header-title { font-size: 14px; }
    #aba-view-osce-corridor .aba-header-subtitle { font-size: 11px; }
    .aba-osce-corridor-full .aba-corridor { min-height: 220px; }
    /* Simulator OSCE corridor: fill viewport below header (overrides generic .aba-corridor height: 220px) */
    #aba-view-osce-corridor .aba-osce-corridor-full > .aba-corridor {
        flex: 1 1 0%;
        min-height: max(220px, 28vh);
        height: auto;
        max-height: none;
        align-self: stretch;
    }
    #aba-view-osce-corridor .aba-corridor-ceiling { height: 56px; }
    #aba-view-osce-corridor .aba-corridor-floor { height: 90px; }
    #aba-view-osce-corridor .aba-corridor-wall-left,
    #aba-view-osce-corridor .aba-corridor-wall-right {
        top: 56px;
        bottom: 90px;
    }
    .aba-door-read-btn {
        font-size: 12px;
        padding: 10px 18px;
        min-height: 44px;
    }

    /* Practice OSCE: 1 door top center (Monitor), 2 doors bottom row */
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        justify-items: center;
        align-items: center;
        gap: 12px 20px;
        padding: 16px 20px 24px;
        overflow: hidden;
        box-sizing: border-box;
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-frame.aba-door-center {
        grid-column: 1 / -1;
        grid-row: 1;
        align-self: center;
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-frame.aba-door-left {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        margin-right: 6px;
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-frame.aba-door-right {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        margin-left: 6px;
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-frame {
        position: relative;
        flex: none;
        min-width: 0;
        width: min(42vw, 128px);
        max-width: 128px;
        height: clamp(140px, 26vh, 220px);
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-frame.aba-door-center {
        width: min(46vw, 140px);
        max-width: 140px;
        height: clamp(150px, 28vh, 235px);
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-frame.active,
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-frame:hover {
        transform: none;
        filter: brightness(1.08);
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-label.aba-door-category {
        font-size: 8px;
        line-height: 1.2;
        max-width: 100%;
        padding: 4px 6px;
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-read-btn {
        width: calc(100% - 14px);
        max-width: 100px;
        padding: 8px 10px;
        min-height: 42px;
        font-size: 11px;
    }

    /* OSCE corridor — mobile: 3D perspective corridor layout (exam mode) */
    #aba-view-osce-corridor .aba-corridor-doors {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        overflow: hidden;
        padding: 0;
    }
    /* All doors: absolute, preserve 1:2 aspect ratio */
    #aba-view-osce-corridor .aba-door-frame {
        position: absolute;
        aspect-ratio: 1 / 2;
        width: auto;
        height: auto;
    }
    #aba-view-osce-corridor .aba-door-frame:hover {
        transform: none;
        filter: none;
    }
    /* Active door (depth 0): large, centered, anchored to bottom */
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-0 {
        height: 52%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 4;
        opacity: 1;
        filter: brightness(1.12);
    }
    /* Depth 1 pair */
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-1 {
        height: 30%;
        bottom: 34%;
        z-index: 3;
        opacity: 0.92;
    }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-1.aba-door-left {
        left: 3%;
    }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-1.aba-door-right {
        right: 3%;
    }
    /* Depth 2 pair */
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-2 {
        height: 22%;
        bottom: 45%;
        z-index: 2;
        opacity: 0.8;
    }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-2.aba-door-left {
        left: 14%;
    }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-2.aba-door-right {
        right: 14%;
    }
    /* Depth 3 pair */
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-3 {
        height: 16%;
        bottom: 53%;
        z-index: 1;
        opacity: 0.65;
    }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-3.aba-door-left {
        left: 23%;
    }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-3.aba-door-right {
        right: 23%;
    }
    /* Hide chair/notes on deeper doors */
    #aba-view-osce-corridor .aba-door-depth-2 .aba-door-chair,
    #aba-view-osce-corridor .aba-door-depth-2 .aba-door-notes,
    #aba-view-osce-corridor .aba-door-depth-3 .aba-door-chair,
    #aba-view-osce-corridor .aba-door-depth-3 .aba-door-notes {
        display: none;
    }

    .aba-chat-container { height: 400px; }
    .aba-soe-main .aba-chat-container,
    .aba-osce-main .aba-chat-container {
        height: auto;
        flex: 1 1 0%;
        min-height: 0;
    }

    /* Monitor station — mobile: vertical layout, answer below monitor */
    .aba-osce-main.aba-osce-monitor-station {
        flex-direction: column;
    }
    .aba-osce-main.aba-osce-monitor-station .aba-osce-main-content-wrap {
        min-width: 0;
        flex: 1 1 0%;
        min-height: 0;
        flex-direction: column;
    }
    .aba-osce-main-monitor {
        overflow: hidden;
        padding: 8px;
    }
    .aba-osce-chat-area.aba-osce-monitor-mode .aba-osce-main-monitor {
        flex: 1 1 60%;
        min-height: 180px;
        overflow: hidden;
    }
    /* Mobile answer area injected below monitor by JS */
    .aba-monitor-mobile-answer {
        flex-shrink: 0;
        padding: 10px 12px;
        background: rgba(255,255,255,0.04);
        border-top: 1px solid rgba(255,255,255,0.1);
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 45vh;
    }
    .aba-monitor-mobile-answer .aba-monitor-question-card {
        padding: 8px 12px;
        min-height: auto;
    }
    .aba-monitor-mobile-answer .aba-monitor-answer-card {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    .aba-monitor-mobile-answer .aba-chat-input {
        min-height: 80px;
        max-height: 120px;
        font-size: 14px;
    }
    .aba-monitor-mobile-answer .aba-monitor-answer-actions {
        display: flex;
        gap: 8px;
        padding-top: 8px;
        flex-shrink: 0;
    }
    /* Combined tab bar — full-width on mobile */
    .aba-combined-tab-bar {
        width: 100%;
    }
    .aba-combined-tab {
        flex: 1;
        min-height: 44px;
        text-align: center;
        font-size: 13px;
    }
    /* Monitor flow controls — mobile */
    .aba-monitor-flow-controls {
        padding: 8px 12px;
    }
    /* Ultrasound station — main area like monitor */
    .aba-osce-simulator-main { min-width: 0; }
    .aba-osce-main-ultrasound {
        overflow: hidden;
        padding: 8px;
    }
    .aba-monitor-screen { padding: 6px 10px; }
    .aba-monitor-wave-label { font-size: 16px; min-width: 44px; }
    .aba-monitor-values { flex: 0 0 120px; }
    .aba-monitor-param .aba-monitor-value { font-size: 20px; }
    .aba-monitor-param-label { font-size: 14px; }
    .aba-monitor-alarm { font-size: 8px; padding: 2px 4px; }

    .aba-chat-message { max-width: 90%; }

    .aba-timer-float {
        top: 10px;
        right: 10px;
    }

    .aba-timer { padding: 6px 12px; gap: 8px; }
    .aba-timer-circle { width: 34px; height: 34px; }
    .aba-timer-digits { font-size: 17px; }

    .aba-examiners { gap: 10px; }
    .aba-examiner-avatar { width: 36px; height: 36px; }
    .aba-examiner-avatar .aba-examiner-speak-icon { width: 16px; height: 16px; }

    /* SOE layout — mobile: sidebar slides in from left */
    .aba-soe-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        background: rgba(255,255,255,0.08);
        border: none;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
    }
    .aba-soe-sidebar-toggle:hover {
        background: rgba(255,255,255,0.14);
    }

    .aba-soe-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    #aba-view-soe-session.aba-soe-sidebar-open .aba-soe-sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .aba-soe-sidebar-close {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: rgba(255,255,255,0.1);
        border: none;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        z-index: 1002;
    }
    .aba-soe-sidebar-close:hover {
        background: rgba(255,255,255,0.18);
    }

    .aba-soe-main {
        position: relative;
        flex-direction: row;
        height: calc(100dvh - var(--aba-header-h));
    }

    .aba-soe-sidebar {
        position: fixed;
        left: 0;
        top: var(--aba-header-h);
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        flex-direction: column;
        padding: 54px 16px 20px;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
        background: #1e293b;
    }
    #aba-view-soe-session.aba-soe-sidebar-open .aba-soe-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    }

    .aba-soe-sidebar-section { flex-direction: column; }
    .aba-soe-sidebar-menu { flex-direction: column; margin-top: auto; padding-top: 12px; }
    .aba-soe-sidebar .aba-soe-sidebar-btn { width: 100%; }
    .aba-soe-chat-area {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* SOE header — mobile: single row, logo left, phase+timer, toggle right */
    #aba-view-soe-session .aba-header {
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 10px 12px 10px 14px;
        gap: 10px;
    }
    #aba-view-soe-session .aba-header-logo {
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-start;
        margin-right: 0;
    }
    #aba-view-soe-session .aba-header-logo .aba-header-logo-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
    #aba-view-soe-session .aba-header-title { font-size: 13px; }
    #aba-view-soe-session .aba-header-right-group--soe-timer {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
    }
    #aba-view-soe-session .aba-header-logo .aba-header-phase--soe-under-title {
        font-size: 9px;
        padding: 3px 8px;
        gap: 6px;
        max-width: min(220px, 52vw);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #aba-view-soe-session .aba-header .aba-timer-compact {
        font-size: 13px;
        padding: 5px 12px;
        min-width: 64px;
        flex: 1 1 auto;
        max-width: 140px;
    }
    #aba-view-soe-session .aba-soe-sidebar-toggle {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
    }

    /* OSCE layout — mobile: sidebar slides in from left */
    .aba-osce-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        background: rgba(255,255,255,0.08);
        border: none;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
    }
    .aba-osce-sidebar-toggle:hover {
        background: rgba(255,255,255,0.14);
    }

    .aba-osce-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .aba-osce-exam-view.aba-osce-sidebar-open .aba-osce-sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .aba-osce-sidebar-close {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: rgba(255,255,255,0.1);
        border: none;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        z-index: 1002;
    }
    .aba-osce-sidebar-close:hover {
        background: rgba(255,255,255,0.18);
    }

    .aba-osce-main {
        position: relative;
        flex-direction: row;
        height: calc(100dvh - var(--aba-header-h));
    }

    .aba-osce-sidebar {
        position: fixed;
        left: 0;
        top: var(--aba-header-h);
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        flex-direction: column;
        padding: 54px 16px 20px;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
        background: #1e293b;
    }
    .aba-osce-exam-view.aba-osce-sidebar-open .aba-osce-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    }

    .aba-osce-sidebar-section { flex-direction: column; }
    .aba-osce-sidebar-menu { flex-direction: column; margin-top: auto; padding-top: 12px; }
    .aba-osce-sidebar .aba-osce-sidebar-btn { width: 100%; }
    .aba-osce-chat-area {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* OSCE header — mobile: single row, logo left, phase+timer, toggle right */
    .aba-osce-exam-view .aba-header {
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 10px 12px 10px 14px;
        gap: 10px;
    }
    .aba-osce-exam-view .aba-header-logo {
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-start;
        margin-right: 0;
    }
    .aba-osce-exam-view .aba-header-logo .aba-header-logo-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
    .aba-osce-exam-view .aba-header-title { font-size: 13px; }
    .aba-osce-exam-view .aba-header-right-group--osce-timer {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .aba-osce-exam-view .aba-header-logo .aba-header-phase--osce-under-title {
        font-size: 9px;
        padding: 3px 8px;
        gap: 6px;
        max-width: min(220px, 52vw);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .aba-osce-exam-view .aba-header .aba-timer-compact {
        font-size: 13px;
        padding: 5px 12px;
        min-width: 64px;
        flex: 1 1 auto;
        max-width: 140px;
    }
    .aba-osce-exam-view .aba-osce-sidebar-toggle {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
    }
    /* Mobile sidebar hint tooltip */
    .aba-mobile-sidebar-hint {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 6px;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 600;
        padding: 6px 10px;
        background: rgba(59,130,246,0.95);
        color: #fff;
        border-radius: 6px;
        z-index: 100;
        pointer-events: none;
        animation: aba-hint-fade 5s ease forwards;
    }
    .aba-mobile-sidebar-hint::before {
        content: '';
        position: absolute;
        bottom: 100%;
        right: 10px;
        border: 5px solid transparent;
        border-bottom-color: rgba(59,130,246,0.95);
    }
    @keyframes aba-hint-fade {
        0%, 80% { opacity: 1; }
        100% { opacity: 0; }
    }

    .aba-header-right-group {
        gap: 10px;
    }

    .aba-orientation-slide { padding: 24px; }
    .aba-orientation-icon { width: 70px; height: 70px; font-size: 36px; }
    .aba-lobby-content-wrap .aba-lobby-orient-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size: 22px; }

    .aba-section-title { font-size: 20px; }

    .aba-lobby-main { padding: 16px; }
    .aba-lobby-banner { margin-bottom: 16px; }
    .aba-lobby-banner-title { font-size: 12px; }
    .aba-lobby-card { padding: 24px 20px; }

    .aba-break-icons { gap: 20px; }
    .aba-break-icon-circle { width: 48px; height: 48px; font-size: 22px; }

    /* Session break — stack vertically on mobile */
    .aba-session-break-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .aba-session-break-rest {
        border-right: none;
        border-bottom: 1px solid var(--aba-border, rgba(255,255,255,0.1));
        padding: 24px 20px;
    }
    .aba-session-break-case {
        padding: 24px 20px;
    }
    /* SOE Transition — sticky continue */
    #aba-transition-content .aba-btn,
    #aba-continue-to-osce-btn,
    #aba-begin-s2-btn {
        width: 100%;
        min-height: 48px;
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    .aba-score-circle { width: 110px; height: 110px; }
    .aba-score-circle-inner { width: 85px; height: 85px; }
    .aba-score-value { font-size: 26px; }

    /* Results responsive */
    .aba-results-scroll { padding: 16px 14px; }
    .aba-results-cards { grid-template-columns: 1fr; }
    .aba-results-domains { grid-template-columns: 1fr; }
    .aba-results-feedback-grid { grid-template-columns: 1fr; }
    .aba-score-circle { width: 110px; height: 110px; }
    .aba-score-circle-inner { width: 86px; height: 86px; }
    .aba-score-value { font-size: 22px; }

    .aba-bell-notification {
        padding: 24px 30px;
        width: 90%;
        max-width: 400px;
    }

    /* Safe-area support for notched devices */
    .aba-soe-main .aba-chat-input-area,
    .aba-osce-main .aba-chat-input-area {
        padding-bottom: calc(14px + var(--aba-safe-bottom));
    }
    .aba-soe-sidebar,
    .aba-osce-sidebar {
        padding-bottom: calc(20px + var(--aba-safe-bottom));
    }
    .aba-monitor-mobile-answer {
        padding-bottom: calc(10px + var(--aba-safe-bottom));
    }

    /* Sticky bottom action pattern */
    .aba-prep-footer,
    .aba-osce-prep-footer {
        position: sticky;
        bottom: 0;
        z-index: 10;
        padding: 12px 16px calc(12px + var(--aba-safe-bottom));
        background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6) 30%);
        margin-top: auto;
    }

    /* Touch target minimums */
    .aba-btn,
    .aba-chat-send-btn,
    .aba-chat-voice-btn,
    .aba-us-seg-btn,
    .aba-combined-tab,
    .aba-case-tab {
        min-height: 44px;
    }
    .aba-chat-send-btn,
    .aba-chat-voice-btn {
        min-width: 44px;
    }
    @media (hover: none) {
        .aba-exam-type-card:hover {
            transform: none;
            box-shadow: none;
        }
        .aba-door-frame:hover {
            transform: none;
            filter: none;
        }
    }

    /* Corridor touch behavior */
    .aba-corridor {
        touch-action: manipulation;
    }
}

@media (max-width: 480px) {
    .aba-chat-container { height: 350px; }
    .aba-soe-main .aba-chat-container,
    .aba-osce-main .aba-chat-container {
        height: auto;
        flex: 1 1 0%;
        min-height: 0;
    }
    .aba-chat-input-area { padding: 10px; gap: 6px; }
    .aba-chat-input { padding: 8px 12px; font-size: 13px; }
    .aba-chat-send-btn { width: 38px; height: 38px; }
    .aba-chat-voice-btn { width: 38px; height: 38px; }

    .aba-examiner-label { font-size: 9px; }
    .aba-soe-main .aba-chat-messages,
    .aba-osce-main .aba-chat-messages { padding: 16px 12px; }
    .aba-soe-main .aba-chat-input-area,
    .aba-osce-main .aba-chat-input-area { padding: 10px 12px; }

    .aba-header-right-group { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

    .aba-corridor { height: 180px; }
    .aba-door-frame { width: 30px; height: 60px; }
    .aba-door-glass { height: 20px; top: 6px; left: 4px; right: 4px; }
    .aba-door-number { font-size: 8px; top: -20px; }
    .aba-door-chair { display: none; }

    /* OSCE corridor — small mobile: perspective layout adjustments */
    .aba-osce-corridor-full .aba-corridor { min-height: 180px; }
    #aba-view-osce-corridor .aba-osce-corridor-full > .aba-corridor {
        flex: 1 1 0%;
        min-height: max(200px, 26vh);
        height: auto;
        max-height: none;
        align-self: stretch;
    }
    #aba-view-osce-corridor .aba-corridor-ceiling { height: 48px; }
    #aba-view-osce-corridor .aba-corridor-floor { height: 76px; }
    #aba-view-osce-corridor .aba-corridor-wall-left,
    #aba-view-osce-corridor .aba-corridor-wall-right {
        top: 48px;
        bottom: 76px;
    }
    #aba-view-osce-corridor .aba-header { height: auto; min-height: 56px; }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-0 {
        height: 48%;
    }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-1 {
        height: 26%;
        bottom: 32%;
    }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-2 {
        height: 19%;
        bottom: 43%;
    }
    #aba-view-osce-corridor .aba-door-frame.aba-door-depth-3 {
        height: 14%;
        bottom: 50%;
    }
    .aba-door-read-btn {
        font-size: 11px;
        padding: 8px 14px;
        min-height: 40px;
        bottom: 12px;
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor {
        gap: 10px 14px;
        padding: 12px 12px 18px;
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-frame {
        width: min(40vw, 112px);
        max-width: 112px;
        height: clamp(120px, 24vh, 190px);
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-frame.aba-door-center {
        width: min(44vw, 124px);
        max-width: 124px;
        height: clamp(128px, 26vh, 200px);
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-label.aba-door-category {
        font-size: 7px;
        top: -34px;
        padding: 3px 5px;
    }
    #aba-view-osce-corridor .aba-corridor-doors.aba-practice-corridor .aba-door-read-btn {
        width: calc(100% - 10px);
        max-width: 92px;
        min-height: 38px;
        padding: 6px 8px;
        bottom: 8px;
        font-size: 10px;
    }

    .aba-exam-type-card { padding: 20px; }
    .aba-exam-type-icon { width: 60px; height: 60px; font-size: 28px; }
    .aba-exam-type-name { font-size: 16px; }

    /* Monitor station — extra small: minimal fonts, no scroll */
    .aba-osce-main-monitor {
        overflow: hidden;
        padding: 6px;
    }
    .aba-monitor-values { flex: 0 0 100px; }
    .aba-monitor-param .aba-monitor-value { font-size: 18px; }
    .aba-monitor-wave-label { font-size: 14px; min-width: 40px; }

    .aba-timer-digits { font-size: 16px; }
    .aba-timer-label { font-size: 10px; }

    /* Results — compact on small phones */
    .aba-score-circle { width: 90px; height: 90px; }
    .aba-score-circle-inner { width: 70px; height: 70px; }
    .aba-score-value { font-size: 20px; }
    .aba-results-scroll { padding: 12px; }
    .aba-results-cards { grid-template-columns: 1fr; gap: 12px; }
    .aba-results-domains { grid-template-columns: 1fr; }
    .aba-results-feedback-grid { grid-template-columns: 1fr; }
    .aba-results-glass-card { padding: 14px; }
    .aba-results-card-title { font-size: 14px; }
    .aba-results-domain-name { font-size: 12px; }
    .aba-results-val { font-size: 13px; }
    .aba-prep-header .aba-btn-results-back {
        position: sticky;
        top: 0;
        z-index: 10;
        font-size: 12px;
        padding: 8px 14px;
    }

    /* Lobby — full-width buttons */
    .aba-lobby-card .aba-btn {
        width: 100%;
        min-height: 48px;
    }

    .aba-dashboard-view--simulator .aba-dashboard-footer {
        padding: 10px 12px 10px;
        margin-top: 8px;
        background: transparent;
    }
    .aba-dashboard-footer .aba-btn {
        width: 100%;
        min-height: 48px;
    }

    /* Dashboard — extra-small: readable subtitle + stats, tighter cards */
    .aba-dashboard-view .aba-header-title {
        font-size: 12px;
    }
    .aba-dashboard-view .aba-header-subtitle {
        font-size: 8px;
        -webkit-line-clamp: 2;
    }
    .aba-dashboard-view .aba-header-logo-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }
    .aba-dashboard-view .aba-header-tool {
        font-size: 9px;
        gap: 3px;
    }
    .aba-dashboard-view .aba-header-tool-icon {
        width: 15px;
        height: 15px;
        min-width: 15px;
        min-height: 15px;
        max-width: 15px;
        max-height: 15px;
    }
    .aba-dashboard-view .aba-dashboard-cards-grid .aba-exam-type-card {
        padding: 5px 7px;
        gap: 5px;
    }
    .aba-dashboard-view .aba-dashboard-cards-grid .aba-exam-type-name {
        font-size: 10px;
    }
    .aba-dashboard-view .aba-dashboard-cards-grid .aba-exam-type-desc {
        font-size: 7px;
        line-height: 1.2;
    }
    .aba-dashboard-view .aba-dashboard-cards-grid .aba-exam-type-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 13px;
    }
    .aba-dashboard-view .aba-dashboard-cards-grid .aba-breakdown-row {
        font-size: 8px;
    }
}

/* Dark mode icon overrides */
.aba-dark .aba-exam-type-icon.soe {
    background: linear-gradient(135deg, #1e2a47, #2d3a5c);
}

.aba-dark .aba-exam-type-icon.osce {
    background: linear-gradient(135deg, #1a2e28, #234b3d);
}

.aba-dark .aba-exam-type-icon.full {
    background: linear-gradient(135deg, #2d2640, #3d3555);
}

@media (max-width: 1100px) {
    .aba-osce-sidebar--ultrasound {
        width: 240px;
    }

    .aba-us-exam-toolbar {
        padding: 12px 14px;
    }

    .aba-us-annotation-wrap {
        grid-template-columns: 1fr;
    }

    .aba-us-point-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .aba-osce-main--ultrasound .aba-osce-main-content-wrap--ultrasound {
        min-width: 0;
    }

    .aba-osce-ultrasound-main .aba-osce-main-ultrasound {
        padding: 8px;
    }

    .aba-us-exam-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        border-radius: 16px;
    }

    .aba-us-toolbar-side {
        justify-content: space-between;
    }

    .aba-us-step-indicator {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .aba-us-step-indicator::-webkit-scrollbar {
        display: none;
    }

    .aba-us-workspace {
        padding: 10px;
        border-radius: 18px;
    }

    .aba-us-action-dock {
        padding: 10px 12px;
        border-radius: 16px;
    }

    .aba-us-point-inputs {
        grid-template-columns: 1fr;
    }

    /* US Labels: daha az dikey boşluk, resim + input dengesi */
    .aba-osce-ultrasound-main .aba-us-workspace {
        margin-top: 4px;
        margin-bottom: 4px;
    }
    .aba-us-stage-points .aba-us-annotation-wrap {
        gap: 6px;
    }
    .aba-us-stage-points .aba-us-annotation-img {
        max-height: min(42vh, 380px);
        width: auto;
        height: auto;
        max-width: 100%;
        object-fit: contain;
    }
}

@media (max-width: 640px) {
    .aba-us-toolbar-side {
        flex-wrap: wrap;
    }

    .aba-ultrasound-task-badge,
    .aba-ultrasound-task-timer,
    .aba-us-step-dot {
        min-height: 34px;
    }

    .aba-us-step-label {
        font-size: 16px;
    }

    .aba-us-workspace-card {
        padding: 18px 16px;
    }

    .aba-us-workspace-title {
        max-width: none;
        font-size: 22px;
    }

    .aba-us-action-dock {
        flex-direction: column;
        align-items: stretch;
    }

    .aba-us-points-done,
    .aba-us-transducer-btn,
    .aba-us-doppler-btn,
    .aba-us-axis-btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        font-size: 14px;
    }

    /* US toolbar — 2-row split on small screens */
    .aba-us-exam-toolbar {
        padding: 8px 10px;
        gap: 8px;
    }
    .aba-us-toolbar-left {
        flex-wrap: wrap;
        gap: 6px;
    }
    .aba-us-progress-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
    }
    .aba-us-progress-pills::-webkit-scrollbar {
        display: none;
    }
    .aba-us-pill {
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 32px;
        padding: 4px 10px;
        font-size: 11px;
    }
    .aba-us-toolbar-prompt {
        font-size: 12px;
        line-height: 1.4;
    }
    /* US workspace — pinch-zoom friendly */
    .aba-us-workspace {
        min-height: 35vh;
    }
    /* US point inputs — single column, larger inputs */
    .aba-us-point-inputs {
        grid-template-columns: 1fr;
    }
    .aba-us-point-inputs input {
        min-height: 44px;
        font-size: 14px;
    }

    /* US Labels — kompakt input satırları (ultrasound istasyonu) */
    .aba-osce-ultrasound-main .aba-us-point-inputs-grid {
        gap: 4px;
    }
    .aba-osce-ultrasound-main .aba-us-point-input-row {
        gap: 4px;
    }
    .aba-osce-ultrasound-main .aba-us-point-input-row label {
        min-width: 40px;
        font-size: 12px;
    }
    .aba-osce-ultrasound-main .aba-us-point-input-row input {
        min-height: 38px;
        font-size: 13px;
        padding: 6px 10px;
        max-width: none;
    }

    /* US examiner prompt — visible as banner below toolbar on mobile */
    .aba-us-mobile-examiner-banner {
        display: block;
        padding: 8px 12px;
        background: rgba(59,130,246,0.15);
        border-radius: 8px;
        font-size: 12px;
        color: rgba(255,255,255,0.9);
        line-height: 1.4;
        margin-bottom: 8px;
    }
}

@media (max-width: 768px) {
    .aba-access-summary-grid {
        grid-template-columns: 1fr;
    }

    .aba-exam-access-badge {
        top: 6px;
        right: 6px;
        font-size: 8px;
    }

    .aba-exam-access-note {
        font-size: 8px;
    }

    .aba-corridor-info-card {
        width: 100%;
        justify-content: center;
        text-align: center;
        font-size: 11px;
    }

    .aba-door-lock-note {
        width: 110px;
        bottom: -30px;
        font-size: 8px;
    }
}