/* Clinical trainer active-case layout overrides. */

/* The opened case is pinned to the real WebView viewport. */
.case-open{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    min-height:0 !important;
    padding:4px 0 0 !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:pan-y;
}

.case-open .trainer-wrap{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 14px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
}

.case-open #session{
    flex:1 1 auto !important;
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:pan-y;
}

.case-open .active-case-top{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    align-items:center !important;
    gap:8px !important;
    overflow:hidden !important;
}

.case-open .active-case-title{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    gap:8px !important;
    align-items:center !important;
}

.case-open .active-case-copy{
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
}

.case-open .active-case-name-row{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    max-width:100%;
}

.case-open .active-case-name-row h2{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.case-open .restart-case{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-self:center !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    height:32px !important;
    min-height:32px !important;
    margin:0 !important;
    padding:0 10px !important;
    border:1px solid rgba(74,151,239,.34) !important;
    border-radius:11px !important;
    background:linear-gradient(145deg,rgba(16,53,91,.88),rgba(8,31,56,.96)) !important;
    color:#a9d5ff !important;
    font:inherit !important;
    font-size:9.4px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
    transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease !important;
}
.case-open .restart-case:hover{
    transform:translateY(-1px);
    border-color:rgba(86,174,255,.55) !important;
    background:linear-gradient(145deg,rgba(20,72,123,.92),rgba(10,40,72,.98)) !important;
    color:#d9efff !important;
}
.case-open .restart-case:active{transform:translateY(0) scale(.97)}
.case-open .restart-case:disabled{opacity:.5;transform:none}
.case-open .restart-short{display:none}

@keyframes trainerFinishBreath{
    0%,100%{box-shadow:0 6px 18px rgba(24,170,112,.16),inset 0 1px 0 rgba(255,255,255,.08)}
    50%{box-shadow:0 8px 24px rgba(34,197,126,.28),0 0 0 3px rgba(34,197,126,.055),inset 0 1px 0 rgba(255,255,255,.11)}
}
.case-open .finish-top{
    position:static !important;
    inset:auto !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-self:center !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    height:32px !important;
    min-height:32px !important;
    margin:0 !important;
    padding:0 11px !important;
    border:1px solid rgba(65,220,155,.42) !important;
    border-radius:11px !important;
    background:linear-gradient(135deg,rgba(20,121,83,.94),rgba(18,88,72,.96)) !important;
    color:#d9fff0 !important;
    font:inherit !important;
    font-size:9.7px !important;
    font-weight:850 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    box-shadow:0 6px 18px rgba(24,170,112,.16),inset 0 1px 0 rgba(255,255,255,.08) !important;
    animation:trainerFinishBreath 2.7s ease-in-out infinite;
    transition:transform .16s ease,filter .16s ease,border-color .16s ease !important;
}

.case-open .finish-top:hover{
    background:linear-gradient(135deg,rgba(24,146,96,.98),rgba(20,105,82,.98)) !important;
    border-color:rgba(89,235,172,.62) !important;
    color:#f0fff8 !important;
    transform:translateY(-1px);
    filter:brightness(1.05);
}
.case-open .finish-top:active{transform:translateY(0) scale(.97)}
.case-open .finish-top:disabled{animation:none;transform:none;filter:none}

.case-open .progress-menu-wrap{flex:0 0 auto !important;}

/* This is the ONLY vertically scrollable area of an opened case. */
.case-open .trainer-chat{
    flex:1 1 0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    margin:0 !important;
    padding:12px 1px 18px !important;
    scroll-padding-bottom:112px !important;
    overscroll-behavior-y:contain !important;
    overscroll-behavior-x:none !important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y !important;
    scrollbar-width:none;
}

.case-open .trainer-chat::-webkit-scrollbar{display:none;width:0;height:0;}

.case-open .trainer-patient-card{
    flex:0 0 auto !important;
    height:auto !important;
    max-height:none !important;
    align-self:flex-start !important;
}


/* Messages always expand to their full content; no nested message scrollbars. */
.case-open .trainer-message{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}

.case-open .patient-profile{
    max-width:100% !important;
    min-width:0 !important;
}

.case-open .trainer-bubble,
.case-open .trainer-patient,
.case-open .trainer-doctor{
    min-width:0 !important;
    width:fit-content !important;
    max-width:min(92%,700px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
}

.case-open .trainer-message-doctor .trainer-bubble{
    margin-left:auto !important;
    margin-right:0 !important;
}
.case-open .trainer-message-patient .trainer-bubble{margin-right:auto !important;}

.case-open .message-content,
.case-open .markdown-enhanced,
.case-open .trainer-bubble .message-content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
}

/* Rich content is fitted into the bubble instead of creating its own scroll area. */
.case-open .message-content .table-wrap,
.case-open .message-content .markdown-table-wrapper,
.case-open .message-content .table-responsive,
.case-open .message-content table{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}
.case-open .message-content table{
    table-layout:fixed !important;
    border-collapse:collapse;
}
.case-open .message-content th,
.case-open .message-content td{
    min-width:0 !important;
    max-width:none !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
}
.case-open .message-content pre{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
}
.case-open .message-content code{white-space:pre-wrap !important;overflow-wrap:anywhere !important;}
.case-open .message-content .katex-display{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    font-size:.92em;
}
.case-open .message-content img,
.case-open .message-content svg,
.case-open .message-content canvas{
    max-width:100% !important;
    height:auto !important;
}

/* Dock always remains fully inside the visible WebView. */
.case-open .case-dock{
    position:relative !important;
    inset:auto !important;
    z-index:50;
    flex:0 0 auto !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:6px 2px max(28px,env(safe-area-inset-bottom)) !important;
    overflow:visible !important;
    border-top:0 !important;
    background:#050b16;
    box-shadow:none !important;
}

.case-open .composer{
    position:relative !important;
    inset:auto !important;
    z-index:3 !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) 40px !important;
    align-items:end !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:46px !important;
    margin:0 !important;
    overflow:visible !important;
}
.case-open .composer textarea{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:46px;
    min-height:46px !important;
    max-height:140px !important;
    margin:0 !important;
    padding:11px 12px !important;
    font-size:16px !important;
    line-height:1.35 !important;
    overflow-y:hidden;
}
.case-open .composer #send{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    align-self:center !important;
    justify-self:center !important;
    padding:0 !important;
    margin:0 !important;
}
.case-open .composer #actions-toggle{
    width:auto !important;
    min-width:88px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    align-self:center !important;
    justify-self:start !important;
    padding:0 13px !important;
    margin:0 !important;
}

@media(max-width:520px){
    .case-open .trainer-wrap{padding:0 9px !important;}
    .case-open .active-case-top{gap:6px !important;}
    .case-open .active-case-title{gap:7px !important;}
    .case-open .active-case-name-row{gap:5px !important;}
    .case-open .active-case-name-row h2{font-size:15px !important;}
    .case-open .restart-case{
        height:30px !important;
        min-height:30px !important;
        padding:0 7px !important;
        border-radius:10px !important;
        font-size:8.6px !important;
        gap:4px !important;
    }
    .case-open .restart-long{display:none}
    .case-open .restart-short{display:inline}
    .case-open .finish-top{
        height:30px !important;
        min-height:30px !important;
        padding:0 8px !important;
        border-radius:10px !important;
        font-size:8.8px !important;
    }
    .case-open .progress-menu-toggle{min-width:58px !important;padding:0 8px !important;}
    .case-open .trainer-chat{
        padding:10px 1px 16px !important;
        scroll-padding-bottom:118px !important;
    }
    .case-open .trainer-bubble,
    .case-open .trainer-patient,
    .case-open .trainer-doctor{max-width:92% !important;}
    .case-open .case-dock{
        padding:5px 2px max(30px,env(safe-area-inset-bottom)) !important;
    }
    .case-open .composer{
        grid-template-columns:auto minmax(0,1fr) 38px !important;
        height:auto !important;
        min-height:46px !important;
        gap:7px !important;
    }
    .case-open .composer textarea{
        height:44px;
        min-height:44px !important;
        max-height:132px !important;
        padding:11px !important;
    }
    .case-open .composer #send{
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
        min-height:38px !important;
        max-width:38px !important;
        max-height:38px !important;
    }
    .case-open .composer #actions-toggle{
        min-width:82px !important;
        height:38px !important;
        min-height:38px !important;
        max-height:38px !important;
        padding:0 11px !important;
        font-size:10px !important;
    }
}

@media(max-width:380px){
    .case-open .finish-top{padding:0 6px !important;font-size:8px !important;}
    .case-open .progress-menu-toggle{min-width:54px !important;padding:0 6px !important;}
}

/* One vertical scroll only: the document owns scrolling for an opened case.
   Do not trap touch/wheel gestures inside .trainer-chat. */
.case-open{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    min-height:100dvh !important;
    overflow:visible !important;
    overflow-x:clip !important;
    overflow-y:visible !important;
    overscroll-behavior-y:auto !important;
    touch-action:auto !important;
}

.case-open .trainer-wrap{
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
    display:block !important;
}
.case-open .active-case-top{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:0 !important;
    transform:translateX(-50%) !important;
    z-index:130 !important;
    width:min(900px,calc(100vw - 28px)) !important;
    max-width:900px !important;
    margin:0 !important;
    padding:8px 2px 10px !important;
    background:linear-gradient(180deg,rgba(5,11,22,.995),rgba(5,11,22,.975)) !important;
    border-bottom:1px solid rgba(76,125,188,.2) !important;
    box-shadow:0 10px 24px rgba(5,11,22,.5) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}


.case-open #session{
    flex:none !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    display:block !important;
    overflow:visible !important;
    padding-top:var(--trainer-fixed-header-height,64px) !important;
    overscroll-behavior-y:auto !important;
    touch-action:auto !important;
}

.case-open .trainer-chat{
    flex:none !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;
    overscroll-behavior:auto !important;
    -webkit-overflow-scrolling:auto !important;
    touch-action:auto !important;
    scrollbar-width:auto !important;
}

.case-open .trainer-chat::-webkit-scrollbar{
    display:initial;
    width:auto;
    height:auto;
}

.case-open .case-dock{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:0 !important;
    transform:translateX(-50%) !important;
    z-index:100 !important;
    width:min(900px,calc(100vw - 28px)) !important;
    max-width:900px !important;
    overflow:visible !important;
    margin:0 !important;
    padding:8px 2px max(10px,env(safe-area-inset-bottom)) !important;
    border-top:1px solid rgba(75,125,188,.18) !important;
    background:linear-gradient(180deg,rgba(5,11,22,.94),#050b16 24%) !important;
    box-shadow:0 -16px 30px rgba(5,11,22,.72) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.case-open .trainer-chat{
    padding-bottom:calc(150px + env(safe-area-inset-bottom)) !important;
}

@media(max-width:520px){
    .case-open .active-case-top{
        width:calc(100vw - 18px) !important;
        padding:7px 0 9px !important;
    }
    .case-open .case-dock{
        width:calc(100vw - 18px) !important;
        padding:7px 0 max(10px,env(safe-area-inset-bottom)) !important;
    }
    .case-open .trainer-chat{
        padding-bottom:calc(146px + env(safe-area-inset-bottom)) !important;
    }
}

/* iOS/WebView reliability: the active-case header is portaled directly to <body>. */
.trainer-fixed-case-header{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:0 !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    z-index:2147482000 !important;
    width:min(900px,calc(100vw - 28px)) !important;
    max-width:900px !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    margin:0 !important;
    padding:8px 2px 10px !important;
    overflow:visible !important;
    background:linear-gradient(180deg,rgba(5,11,22,.998),rgba(5,11,22,.98)) !important;
    border-bottom:1px solid rgba(76,125,188,.2) !important;
    box-shadow:0 10px 24px rgba(5,11,22,.52) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.trainer-fixed-case-header .active-case-title{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    gap:8px !important;
    align-items:center !important;
}
.trainer-fixed-case-header .active-case-copy{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
}
.trainer-fixed-case-header .active-case-name-row{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
    max-width:100% !important;
}
.trainer-fixed-case-header .active-case-name-row h2{
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.trainer-fixed-case-header .restart-case{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-self:center !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 10px !important;
    border:1px solid rgba(74,151,239,.34) !important;
    border-radius:11px !important;
    background:linear-gradient(145deg,rgba(16,53,91,.88),rgba(8,31,56,.96)) !important;
    color:#a9d5ff !important;
    font:inherit !important;
    font-size:9.4px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
}
.trainer-fixed-case-header .finish-top{
    position:static !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-self:center !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 11px !important;
    border:1px solid rgba(65,220,155,.42) !important;
    border-radius:11px !important;
    background:linear-gradient(135deg,rgba(20,121,83,.94),rgba(18,88,72,.96)) !important;
    color:#d9fff0 !important;
    font:inherit !important;
    font-size:9.7px !important;
    font-weight:850 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:0 6px 18px rgba(24,170,112,.16),inset 0 1px 0 rgba(255,255,255,.08) !important;
    animation:trainerFinishBreath 2.7s ease-in-out infinite;
}
.trainer-fixed-case-header .progress-menu-wrap{flex:0 0 auto !important;}

@media(max-width:520px){
    .trainer-fixed-case-header{
        width:calc(100vw - 18px) !important;
        padding:7px 0 9px !important;
        gap:6px !important;
    }
    .trainer-fixed-case-header .active-case-title{gap:7px !important;}
    .trainer-fixed-case-header .active-case-name-row{gap:5px !important;}
    .trainer-fixed-case-header .active-case-name-row h2{font-size:15px !important;}
    .trainer-fixed-case-header .restart-case{
        height:30px !important;
        min-height:30px !important;
        padding:0 7px !important;
        border-radius:10px !important;
        font-size:8.6px !important;
        gap:4px !important;
    }
    .trainer-fixed-case-header .restart-long{display:none !important;}
    .trainer-fixed-case-header .restart-short{display:inline !important;}
    .trainer-fixed-case-header .finish-top{
        height:30px !important;
        min-height:30px !important;
        padding:0 8px !important;
        border-radius:10px !important;
        font-size:8.8px !important;
    }
    .trainer-fixed-case-header .progress-menu-toggle{
        min-width:58px !important;
        padding:0 8px !important;
    }
}


:is(.case-open,.trainer-fixed-case-header) .restart-case:not(:disabled){cursor:pointer}
:is(.case-open,.trainer-fixed-case-header) .restart-case:disabled{cursor:default}

/* Keep the message composer stable when quick actions are unavailable.
   Without this, a hidden first grid child leaves a phantom third column,
   and the send button/text area can occupy the wrong grid tracks. */
.case-open .composer.actions-unavailable{
    grid-template-columns:minmax(0,1fr) 40px !important;
    min-height:46px !important;
}
.case-open .composer.actions-unavailable #question{
    min-width:0 !important;
    width:100% !important;
    min-height:46px !important;
}
.case-open .composer.actions-unavailable #send{
    grid-column:2;
    justify-self:end !important;
}
@media (max-width:520px){
    .case-open .composer.actions-unavailable{
        grid-template-columns:minmax(0,1fr) 38px !important;
        min-height:46px !important;
    }
    .case-open .composer.actions-unavailable #question{
        min-height:44px !important;
    }
}