/* ==========================================
   PraxisMed - iPadOS Redesign Stylesheet
   ========================================== */

:root {
    --ipad-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --ipad-overlay-bg: rgba(255, 255, 255, 0.55);
    --ipad-overlay-border: rgba(255, 255, 255, 0.45);
    --ipad-text: #1c1c1e;
    --ipad-text-muted: #8e8e93;
    
    --dock-bg: rgba(255, 255, 255, 0.35);
    --dock-border: rgba(255, 255, 255, 0.4);
    --dock-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    
    --app-sheet-bg: rgba(255, 255, 255, 0.82);
    --app-sheet-border: rgba(255, 255, 255, 0.5);
    --app-card-bg: rgba(255, 255, 255, 0.7);
    --app-card-border: rgba(255, 255, 255, 0.4);
}

body.dark-mode {
    --ipad-bg: linear-gradient(135deg, #090a0f 0%, #12131e 100%);
    --ipad-overlay-bg: rgba(15, 17, 28, 0.55);
    --ipad-overlay-border: rgba(255, 255, 255, 0.05);
    --ipad-text: #f2f2f7;
    --ipad-text-muted: #8e8e93;
    
    --dock-bg: rgba(0, 0, 0, 0.4);
    --dock-border: rgba(255, 255, 255, 0.08);
    --dock-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    
    --app-sheet-bg: rgba(20, 22, 37, 0.85);
    --app-sheet-border: rgba(255, 255, 255, 0.08);
    --app-card-bg: rgba(30, 32, 50, 0.6);
    --app-card-border: rgba(255, 255, 255, 0.05);

    background: linear-gradient(135deg, #090a0f 0%, #12131e 100%) !important;
}

/* Base resets & layout override */
body {
    background: var(--ipad-bg) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    transition: background 0.5s ease;
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
}

.app-container {
    height: 100vh !important;
    width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* Desktop/Tablet: esconde sidebar, header e mobile-nav originais */
html:not(.device-mobile) .sidebar,
html:not(.device-mobile) .header,
html:not(.device-mobile) .mobile-bottom-nav {
    display: none !important;
}

/* Mobile: esconde dock e status bar do iPadOS, mostra mobile-nav */
html.device-mobile .ipados-dock-wrapper,
html.device-mobile .ipados-status-bar {
    display: none !important;
}
html.device-mobile .mobile-bottom-nav {
    display: flex !important;
}
html.device-mobile .main-content {
    height: 100vh !important;
}
html.device-mobile .view {
    bottom: 65px !important;
}

/* ═══════════════════════════════════════════════════════════════
   REGRAS PERMANENTES — NÃO ALTERAR SEM PEDIDO EXPLÍCITO DO USUÁRIO
   ═══════════════════════════════════════════════════════════════ */
.app-container:has(#view-checklist-dupla.active) .ipados-status-bar,
html.checklist-ativo .ipados-status-bar {
    display: none !important;
}

/* Suprimir glow e definir fundo quando checklist está ativo (refresh) */
html.checklist-ativo .view:not(#view-home).active::before,
html.checklist-ativo .view:not(#view-home)::before {
    display: none !important;
}
html.checklist-ativo body,
html.checklist-ativo .app-container,
html.checklist-ativo .view {
    background: #f0f7f4 !important;
}

/* Global iPadOS Status Bar */
.ipados-status-bar {
    height: 30px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ipad-text);
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
    user-select: none;
}

.ipados-status-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Main content setup */
.main-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 30px) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.views-container {
    flex: 1 !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(139, 92, 246, 0.30), transparent 40%);
    pointer-events: none;
    z-index: 0;
    transition: background 0.1s ease;
}

body.dark-mode::before {
    background: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(139, 92, 246, 0.25), transparent 40%);
}

.view {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: none !important;
    background: transparent !important;
}

/* Active window behaves as a glassmorphic sheet */
.view.active {
    display: flex !important;
    flex-direction: column !important;
    animation: zoomInSheet 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes zoomInSheet {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Non-home screens get a sheet container wrapper */
.view:not(#view-home):not(#view-landing) {
    background: var(--app-sheet-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    box-shadow: none !important;
    overflow-y: auto !important;
}

body.dark-mode .view:not(#view-home):not(#view-landing) {
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}

body.dark-mode #view-landing {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #0f172a !important;
    --app-card-bg: rgba(255, 255, 255, 0.85) !important;
    --app-card-border: rgba(0, 0, 0, 0.08) !important;
    --app-sheet-bg: rgba(255, 255, 255, 0.95) !important;
    --app-sheet-border: rgba(0, 0, 0, 0.08) !important;
    --ipad-text: #0f172a !important;
    --ipad-text-muted: #64748b !important;
    --text-dark: #0f172a !important;
}

body.dark-mode #view-landing * {
    border-color: inherit !important;
}

body:has(#view-landing.active)::before,
body.landing-active::before {
    display: none !important;
}

body:has(#view-landing.active),
body.landing-active {
    background: #ffffff !important;
}

body.landing-active::before {
    display: none !important;
}

body.landing-active .main-content,
body.landing-active .views-container {
    background: #ffffff !important;
}

.view:not(#view-home):not(#view-landing).active::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(139, 92, 246, 0.10), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.view:not(#view-home).active > * {
    position: relative;
    z-index: 1;
}

/* iPadOS App top nav-bar (for sheets) */
.app-header-bar {
    height: 60px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--app-sheet-border);
    background:
        radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(139, 92, 246, 0.12), transparent 40%),
        var(--app-sheet-bg);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 30;
}

body.dark-mode .app-header-bar {
    background:
        radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(139, 92, 246, 0.10), transparent 40%),
        var(--app-sheet-bg);
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ipad-text);
}

.app-header-back-btn {
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 100px;
    padding: 7px 18px 7px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.app-header-back-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.25);
    transform: scale(1.03);
}

.app-header-back-btn:active {
    transform: scale(0.97);
}

body.dark-mode .app-header-back-btn {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.2);
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-header-actions .icon-btn {
    background: rgba(128, 128, 128, 0.08);
    border: 1px solid rgba(128, 128, 128, 0.12);
    border-radius: 100px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ipad-text);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.dark-mode .app-header-actions .icon-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f2f2f7;
}

.app-header-actions .icon-btn:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    transform: scale(1.08);
}

.app-header-actions .icon-btn:active {
    transform: scale(0.92);
}

.app-header-actions .notification-btn {
    position: relative;
}

.app-header-actions .notification-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff3b30;
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    line-height: 1;
}

.home-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-header-actions .icon-btn {
    background: rgba(128, 128, 128, 0.08);
    border: 1px solid rgba(128, 128, 128, 0.12);
    border-radius: 100px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ipad-text);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
}

body.dark-mode .home-header-actions .icon-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f2f2f7;
}

.home-header-actions .icon-btn:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    transform: scale(1.08);
}

.home-header-actions .icon-btn:active {
    transform: scale(0.92);
}

.home-header-actions .notification-btn {
    position: relative;
}

body.dark-mode .app-header-actions .notification-dot {
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.home-logo-light { display: inline-block !important; }
.home-logo-dark { display: none !important; }
body.dark-mode .home-logo-light { display: none !important; }
body.dark-mode .home-logo-dark { display: inline-block !important; }

/* App Contents wrapper */
.app-sheet-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 24px 110px 24px !important;
}

/* ==========================================
   HOME SCREEN - WIDGETS & APPS GRID
   ========================================== */

/* Background decorativo animado da home */
.home-bg-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    filter: blur(5px);
    z-index: 0;
}
.home-bg-circle {
    position: absolute;
    border-radius: 50%;
}
.home-bg-circle-1 {
    width: 450px;
    height: 450px;
    background: rgba(139, 92, 246, 0.15);
    top: -80px;
    right: -120px;
    will-change: transform;
    animation: loginPulse 9s ease-in-out infinite;
}
.home-bg-circle-2 {
    width: 350px;
    height: 350px;
    background: rgba(99, 102, 241, 0.12);
    bottom: -60px;
    left: -80px;
    will-change: transform;
    animation: loginPulse 11s ease-in-out infinite reverse;
}
.home-bg-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(139, 92, 246, 0.10) 1px, transparent 1px);
    background-size: 32px 32px;
    will-change: transform;
    animation: loginDrift 25s ease-in-out infinite;
}
.home-bg-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-bg-target {
    left: 4%;
    bottom: 15%;
    will-change: transform;
    animation: loginFloat 7s ease-in-out infinite;
}
.home-bg-chart {
    right: 5%;
    top: 20%;
    will-change: transform;
    animation: loginFloat 8s ease-in-out infinite 1.2s;
}
.home-bg-grad {
    left: 45%;
    top: 8%;
    will-change: transform;
    animation: loginFloat 6s ease-in-out infinite 0.6s;
}
.home-bg-heart {
    right: 25%;
    bottom: 20%;
    will-change: transform;
    animation: loginFloat 9s ease-in-out infinite 2s;
}
.home-bg-dot {
    position: absolute;
    border-radius: 50%;
}
.home-bg-dot-1 {
    width: 7px;
    height: 7px;
    background: rgba(99, 102, 241, 0.35);
    top: 30%;
    right: 40%;
    will-change: transform;
    animation: loginPulse 5s ease-in-out infinite;
}
.home-bg-dot-2 {
    width: 5px;
    height: 5px;
    background: rgba(139, 92, 246, 0.30);
    top: 60%;
    left: 8%;
    will-change: transform;
    animation: loginPulse 6s ease-in-out infinite 0.8s;
}
.home-bg-dot-3 {
    width: 6px;
    height: 6px;
    background: rgba(99, 102, 241, 0.30);
    bottom: 35%;
    right: 18%;
    will-change: transform;
    animation: loginPulse 4s ease-in-out infinite 1.5s;
}
.home-bg-dot-4 {
    width: 4px;
    height: 4px;
    background: rgba(139, 92, 246, 0.35);
    top: 15%;
    left: 25%;
    will-change: transform;
    animation: loginPulse 7s ease-in-out infinite 0.3s;
}

/* Reuse keyframes from login (defined in styles.css) */
/* @keyframes loginPulse / loginFloat / loginDrift are in styles.css */

#view-home.view.active {
    display: grid !important;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    padding: 20px 32px 110px 32px !important; /* space for dock */
    height: 100% !important;
    overflow-y: auto !important;
    position: relative;
}
#view-home.view.active::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(700px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(139, 92, 246, 0.13), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

#view-home.view.active > * {
    position: relative;
    z-index: 1;
}
#view-home.view.active > .home-bg-decoration {
    position: absolute;
    z-index: 0;
}

/* Left Pane: Apple Widgets */
.home-widgets-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    background: var(--ipad-overlay-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--ipad-overlay-border);
    border-radius: 24px;
    padding: 18px;
}

.widget-card {
    background: var(--ipad-overlay-bg);
    border: 1px solid var(--ipad-overlay-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    color: var(--ipad-text);
}

/* Widget: Fitness Style Progress */
.widget-fitness {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-fitness-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ipad-text-muted);
}

.widget-fitness-body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fitness-chart {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}

.fitness-chart-rings {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fitness-ring-bg {
    fill: none;
    stroke: rgba(139, 92, 246, 0.12);
    stroke-width: 6;
}

.fitness-ring-progress {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.4));
}

.fitness-chart-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fitness-chart-center span:first-child {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ipad-text);
    line-height: 1.2;
}

.fitness-chart-center span:last-child {
    font-size: 0.55rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ipad-text-muted);
}

.fitness-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.fitness-metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 10px;
}

.fitness-metric-label {
    color: var(--ipad-text-muted);
    font-weight: 500;
    font-size: 0.78rem;
}

.fitness-metric-value {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ipad-text);
}

/* Widget: Streak Style */
.widget-streak {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #ff9f0a 0%, #ff3b30 100%);
    color: white;
    border: none;
}

.widget-streak-icon {
    font-size: 2.2rem;
    animation: flameBeat 1.5s infinite alternate ease-in-out;
}

@keyframes flameBeat {
    0% { transform: scale(1); }
    100% { transform: scale(1.15) rotate(5deg); }
}

.widget-streak-details h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

.widget-streak-details p {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 2px 0 0 0;
    font-weight: 500;
}

/* Right Pane: iPadOS Grid of Apps */
.home-apps-pane {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    background: var(--ipad-overlay-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--ipad-overlay-border);
    border-radius: 28px;
    padding: 28px 28px 32px;
}

.home-apps-header {
    color: var(--ipad-text);
}

.home-apps-header h1 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.home-apps-header p {
    font-size: 1.05rem;
    color: var(--ipad-text-muted);
    margin: 4px 0 0 0;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 28px;
    padding: 12px 0;
}

.app-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.app-icon-wrapper:hover {
    transform: translateY(-6px);
}

.app-icon-wrapper:active {
    transform: scale(0.92) translateY(-2px);
}

.app-icon {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    color: white;
    position: relative;
    overflow: hidden;
}

.app-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.05) 100%);
}

.app-icon i {
    width: 36px;
    height: 36px;
}

.app-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ipad-text);
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

body.dark-mode .app-label {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Apps Gradient Palettes (Apple Style) */
.app-color-exam { background: linear-gradient(135deg, #af52de 0%, #5856d6 100%); }      /* Purple */
.app-color-study { background: linear-gradient(135deg, #34c759 0%, #28cd41 100%); }     /* Green */
.app-color-station { background: linear-gradient(135deg, #5ac8fa 0%, #007aff 100%); }   /* Blue */
.app-color-flashcards { background: linear-gradient(135deg, #ff9f0a 0%, #ff5e3a 100%); }/* Orange/Amber */
.app-color-stats { background: linear-gradient(135deg, #ff2d55 0%, #ff3b30 100%); }     /* Rose */
.app-color-goals { background: linear-gradient(135deg, #30b0c7 0%, #007aff 100%); }     /* Cyan */
.app-color-medals { background: linear-gradient(135deg, #ffd60a 0%, #ff9f0a 100%); }    /* Gold */
.app-color-calendar { background: linear-gradient(135deg, #ff3b30 0%, #ff453a 100%); }  /* Red */
.app-color-settings { background: linear-gradient(135deg, #8e8e93 0%, #636366 100%); }  /* Gray */

/* ==========================================
   FLOATING IPADOS DOCK
   ========================================== */
/* Esconde o Dock e a Status Bar enquanto a tela de login estiver visível (ou seja, sem a classe .hidden) */
body:not(.auth-verified) .ipados-dock-wrapper,
#login-overlay:not(.hidden) ~ .ipados-dock-wrapper,
#login-overlay:not(.hidden) ~ .ipados-status-bar {
    display: none !important;
}

/* Oculta também elementos de fundo se a overlay estiver ativa para não vazar nada */
#login-overlay:not(.hidden) ~ .app-container {
    filter: blur(20px);
    opacity: 0;
    pointer-events: none;
}

/* Deixa textos do formulário de login legíveis no tema claro */
#login-overlay .praxis-login-container label,
#login-overlay .praxis-login-container h2,
#login-overlay .praxis-login-container h3,
#login-overlay .praxis-login-container h5,
#login-overlay .praxis-login-container p,
#login-overlay .praxis-login-container span,
#login-overlay .praxis-login-container a,
#login-overlay .praxis-login-container div,
#login-overlay .praxis-login-container .praxis-remember {
    color: inherit !important;
}

.ipados-dock-wrapper {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    pointer-events: none;
}

.ipados-dock {
    pointer-events: auto;
    background: var(--dock-bg);
    border: 1.5px solid var(--dock-border);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    padding: 10px 16px;
    border-radius: 26px;
    box-shadow: var(--dock-shadow);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.dock-item {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s cubic-bezier(0.1, 0.8, 0.2, 1);
    position: relative;
}

.dock-item:hover {
    transform: scale(1.15) translateY(-8px);
}

.dock-item:active {
    transform: scale(0.9) translateY(0);
}

.dock-item i {
    width: 26px;
    height: 26px;
}

.dock-divider {
    width: 1px;
    height: 40px;
    background: var(--dock-border);
}

/* Dock indicator dot for active view */
.dock-item.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ipad-text);
}

/* ==========================================
    APP: SETTINGS (Ajustes) - view-perfil & view-preferencias
    ========================================== */
.perfil-name {
    color: white !important;
}

.settings-app-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100%;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}

.settings-sidebar {
    background: rgba(0, 0, 0, 0.02);
    border-right: 1px solid var(--app-sheet-border);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.dark-mode .settings-sidebar {
    background: rgba(255, 255, 255, 0.01);
}

.settings-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--ipad-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-menu-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-mode .settings-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.settings-menu-item.active {
    background: #8b5cf6;
    color: white !important;
}

.settings-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.settings-icon-box i {
    width: 16px;
    height: 16px;
}

.settings-content-pane {
    padding: 24px 32px;
    overflow-y: auto;
    background: transparent;
}

/* ==========================================
   APP: EXAM (Questões) - Safari/Books-like Reader
   ========================================== */
#view-exam {
    background: var(--app-sheet-bg) !important;
}

.exam-reader-container {
    max-width: 840px;
    margin: 0 auto;
    padding: 16px 24px 80px 24px;
    width: 100%;
}

.exam-question-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-card-border);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

.exam-question-text {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--ipad-text);
    font-weight: 450;
    margin-bottom: 24px;
}

.exam-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exam-option-item {
    background: var(--app-card-bg);
    border: 2px solid var(--app-card-border);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.exam-option-item:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.04);
}

.exam-option-badge {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    font-weight: 700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exam-option-text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ipad-text);
}

/* ==========================================
   APP: STATIONS (Estações OSCE)
   ========================================== */
.station-app-container {
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Custom premium styling for lists, tables and cards to adapt to glassmorphism */
.panel-white, 
.card, 
.info-card, 
.desempenho-card {
    background: var(--app-card-bg) !important;
    border: 1px solid var(--app-card-border) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    border-radius: 18px !important;
    color: var(--ipad-text) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ipad-text) !important;
}

p, span, label, td, th {
    color: inherit;
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}
/* Overrides para Motor de Exame (view-exam) e OSCE Room */
#view-exam, #view-estacao-room {
    background: var(--app-sheet-bg) !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: none !important;
}

#view-exam.active, #view-estacao-room.active {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
}

#view-exam .exam-header-bar, #view-estacao-room .exam-header-bar {
    height: 64px !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--app-sheet-border) !important;
    background: transparent !important;
}

#view-exam .btn-back-exam, #view-estacao-room .btn-back-exam {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #8b5cf6 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#view-exam .btn-back-exam:hover, #view-estacao-room .btn-back-exam:hover {
    background: rgba(139, 92, 246, 0.2) !important;
}

#view-exam .exam-layout {
    display: flex !important;
    flex: 1 !important;
    overflow: hidden !important;
}

#view-exam .exam-left {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 28px 28px 110px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}

#view-exam .exam-right {
    width: 300px !important;
    border-left: 1px solid var(--app-sheet-border) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    overflow-y: auto !important;
    padding: 24px 24px 110px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

body.dark-mode #view-exam .exam-right {
    background: rgba(255, 255, 255, 0.01) !important;
}

#view-exam .question-text-block {
    font-size: 1.15rem !important;
    line-height: 1.75 !important;
    color: var(--ipad-text) !important;
    font-weight: 450 !important;
}

/* #view-exam .alt-btn styles moved to styles.css */

/* ==========================================
   INTERFACES INTERNAS (DESIGN DE APPS APPLE)
   ========================================== */

/* Ajuste e padronização das fontes e containers internos */
.view .page-container {
    padding: 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.view .page-main-title {
    color: var(--ipad-text) !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 6px !important;
}

.view .page-subtitle {
    color: var(--ipad-text-muted) !important;
    font-size: 1.05rem !important;
    margin-bottom: 32px !important;
}

/* Apple Health / Fitness: Stats Banner */
.view .stats-banner {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 32px !important;
}

.view .stats-banner .ekg-svg,
.view .stats-banner .stat-divider {
    display: none !important; /* Remove elementos antigos/poluídos */
}

/* Redesenhando cada Card de estatística como o App Fitness/Saúde da Apple */
.view .stats-banner .stat-item {
    background: var(--app-card-bg) !important;
    border: 1px solid var(--app-card-border) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s cubic-bezier(0.1, 0.8, 0.2, 1) !important;
}

body.dark-mode .view .stats-banner .stat-item {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.view .stats-banner .stat-item:hover {
    transform: scale(1.02) !important;
}

.view .stats-banner .stat-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
}

.view .stats-banner .stat-icon.bg-purple-trans { background: linear-gradient(135deg, #af52de 0%, #5856d6 100%) !important; }
.view .stats-banner .stat-icon.bg-green-trans { background: linear-gradient(135deg, #34c759 0%, #28cd41 100%) !important; }
.view .stats-banner .stat-icon.bg-blue-trans { background: linear-gradient(135deg, #5ac8fa 0%, #007aff 100%) !important; }

.view .stats-banner .stat-icon i,
.view .stats-banner .stat-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: white !important;
}

.view .stats-banner .stat-info p {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ipad-text-muted) !important;
    margin: 0 0 6px 0 !important;
}

.view .stats-banner .stat-info h2 {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    color: var(--ipad-text) !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.02em !important;
}

.view .stats-banner .stat-info span {
    font-size: 0.8rem !important;
    color: var(--ipad-text-muted) !important;
    font-weight: 500 !important;
}

/* Painéis de Conteúdo Internos (ex: Disciplinas, Listas de OSCE) */
.view .panel-white {
    background: var(--app-card-bg) !important;
    border: 1px solid var(--app-card-border) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
    color: var(--ipad-text) !important;
}

/* Layout de Disciplinas / Barras de Progresso */
.view .donut-layout {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 40px !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .view .donut-layout {
        grid-template-columns: 1fr !important;
    }
}

.view .donut-container {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid var(--app-card-border) !important;
    border-radius: 24px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 180px !important;
}

body.dark-mode .view .donut-container {
    background: rgba(0, 0, 0, 0.2) !important;
}

.view .donut-center h2 {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: var(--ipad-text) !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

.view .donut-center p {
    color: var(--ipad-text-muted) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin: 4px 0 0 0 !important;
}

/* Ajuste de Barras de Progresso para Estilo Apple Fitness */
.view .bars-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.view .bar-item {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid var(--app-card-border) !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    display: grid !important;
    grid-template-columns: 180px 1fr 60px !important;
    align-items: center !important;
    gap: 16px !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .view .bar-item {
    background: rgba(0, 0, 0, 0.1) !important;
}

.view .bar-item:hover {
    transform: scale(1.01) !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .view .bar-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

.view .bar-label {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--ipad-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.view .bar-label .dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.view .bar-label .dot.d-purple { background: #af52de !important; }
.view .bar-label .dot.d-green { background: #34c759 !important; }
.view .bar-label .dot.d-blue { background: #007aff !important; }
.view .bar-label .dot.d-orange { background: #ff9f0a !important; }
.view .bar-label .dot.d-red { background: #ff3b30 !important; }

.view .bar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 6px !important;
    height: 8px !important;
    overflow: hidden !important;
}

body.dark-mode .view .bar-track {
    background: rgba(255, 255, 255, 0.1) !important;
}

.view .bar-fill {
    border-radius: 6px !important;
    height: 100% !important;
}

.view .bar-fill.f-purple { background: linear-gradient(90deg, #5856d6, #af52de) !important; }
.view .bar-fill.f-green { background: linear-gradient(90deg, #28cd41, #34c759) !important; }
.view .bar-fill.f-blue { background: linear-gradient(90deg, #007aff, #5ac8fa) !important; }
.view .bar-fill.f-orange { background: linear-gradient(90deg, #ff5e3a, #ff9f0a) !important; }
.view .bar-fill.f-red { background: linear-gradient(90deg, #ff3b30, #ff453a) !important; }

.view .bar-val {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--ipad-text) !important;
    text-align: right !important;
}

/* Formulários, Tabelas e Listas no design iPadOS */
.view input[type="text"], 
.view input[type="password"], 
.view input[type="email"], 
.view select, 
.view textarea {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid var(--app-sheet-border) !important;
    border-radius: 10px !important;
    color: var(--ipad-text) !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .view input[type="text"], 
body.dark-mode .view input[type="password"], 
body.dark-mode .view input[type="email"], 
body.dark-mode .view select, 
body.dark-mode .view textarea {
    background: rgba(0, 0, 0, 0.2) !important;
}

.view input:focus, 
.view select:focus, 
.view textarea:focus {
    border-color: #8b5cf6 !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode .view input:focus, 
body.dark-mode .view select:focus, 
body.dark-mode .view textarea:focus {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Botões Gerais nos Apps */
html:not(.checklist-ativo) .view button:not(.alt-btn):not(.app-header-back-btn):not(.icon-btn):not(.settings-menu-item):not(.meta-type-btn):not(.meta-quick-btn):not(.checklist-chat-modal-close):not(.checklist-chat-modal-input button):not(.ex-btn-back):not(.ex-btn-finish):not(.ex-btn-nav):not(.ex-btn-review):not(.ex-btn-confirm):not(.q-grid-btn):not(.ex-panel-toggle):not(.sim-btn-start):not(.sim-back-btn):not(.banca-card):not(.btn-start-prova):not(.ex-marca-toggle):not(.ex-marca-swatch):not(.ex-marca-clear):not(.wdg-pomo-btn):not(.wdg-pomo-setting-btn):not(.wdg-pomo-float-btn):not(.wdg-goal-empty-btn):not(.syn-btn-start):not(.syn-btn-confirm):not(.syn-btn-voltar):not(.fc-alternative-btn):not(#btn-fc-confirm):not(#btn-fc-next):not(#btn-fc-start-study):not(.sr-finish-btn):not(.sr-prep-start):not(.sr-send-btn):not(.sr-icon-btn):not(.sr-exit):not(.sr-exam-item) {
    background: #8b5cf6 !important;
    color: white !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

html:not(.checklist-ativo) .view button:not(.alt-btn):not(.app-header-back-btn):not(.icon-btn):not(.settings-menu-item):not(.meta-type-btn):not(.meta-quick-btn):not(.checklist-chat-modal-close):not(.checklist-chat-modal-input button):not(.ex-btn-back):not(.ex-btn-finish):not(.ex-btn-nav):not(.ex-btn-review):not(.ex-btn-confirm):not(.q-grid-btn):not(.ex-panel-toggle):not(.sim-btn-start):not(.sim-back-btn):not(.banca-card):not(.btn-start-prova):not(.ex-marca-toggle):not(.ex-marca-swatch):not(.ex-marca-clear):not(.wdg-pomo-btn):not(.wdg-pomo-setting-btn):not(.wdg-pomo-float-btn):not(.wdg-goal-empty-btn):not(.syn-btn-start):not(.syn-btn-confirm):not(.syn-btn-voltar):not(.fc-alternative-btn):not(#btn-fc-confirm):not(#btn-fc-next):not(#btn-fc-start-study):not(.sr-finish-btn):not(.sr-prep-start):not(.sr-send-btn):not(.sr-icon-btn):not(.sr-exit):not(.sr-exam-item):hover {
    background: #7c3aed !important;
}

/* Botões Secundários */
.view button.btn-secondary, 
.view button.btn-back, 
.view button.cancel-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--ipad-text) !important;
    border: 1px solid var(--app-sheet-border) !important;
}

body.dark-mode .view button.btn-secondary, 
body.dark-mode .view button.btn-back, 
body.dark-mode .view button.cancel-btn {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Meta type toggle (Questoes / Estacoes) */
.meta-type-btn {
    border-radius: 14px !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    border: 2px solid rgba(128, 128, 128, 0.15) !important;
    background: rgba(128, 128, 128, 0.04) !important;
    color: var(--ipad-text-muted) !important;
    gap: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.meta-type-btn:hover {
    border-color: rgba(139, 92, 246, 0.3) !important;
    background: rgba(139, 92, 246, 0.06) !important;
}

.meta-type-btn.active {
    border-color: #8b5cf6 !important;
    background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
}

.meta-type-btn svg {
    width: 20px !important;
    height: 20px !important;
}

body.dark-mode .meta-type-btn {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .meta-type-btn:hover {
    border-color: rgba(139, 92, 246, 0.4) !important;
    background: rgba(139, 92, 246, 0.08) !important;
}

.home-logo-light { display: inline-block !important; }
.home-logo-dark { display: none !important; }
body.dark-mode .home-logo-light { display: none !important; }
body.dark-mode .home-logo-dark { display: inline-block !important; }

/* ═══════════════════════════════════════════════════════
   ESTAÇÃO ROOM — Apple/iPadOS Design
   ═══════════════════════════════════════════════════════ */

.er-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}

.er-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #8b5cf6;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.er-back-btn:hover {
    background: rgba(139, 92, 246, 0.08);
}

.er-back-btn svg {
    width: 16px;
    height: 16px;
}

.er-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ipad-text);
    letter-spacing: -0.01em;
}

.er-timer-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.er-timer-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid rgba(34,197,94,0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #15803d;
    font-variant-numeric: tabular-nums;
}

.er-timer-badge svg {
    width: 16px;
    height: 16px;
    color: #22c55e;
}

.er-finish-btn {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}

.er-finish-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(139,92,246,0.35);
}

.er-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* === CHAT COLUMN === */

.er-chat-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 20px 24px 16px;
    gap: 12px;
}

.er-command-card {
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.12);
    border-radius: 14px;
    padding: 14px 18px;
    flex-shrink: 0;
}

.er-command-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8b5cf6;
    margin-bottom: 8px;
}

.er-command-header svg {
    width: 15px;
    height: 15px;
}

.er-command-text {
    font-size: 0.9rem;
    color: var(--ipad-text);
    line-height: 1.55;
    margin: 0;
    white-space: pre-line;
}

.er-transcript {
    flex: 1;
    overflow-y: auto;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.er-transcript-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: var(--ipad-text-muted);
    opacity: 0.6;
}

.er-transcript-empty svg {
    width: 32px;
    height: 32px;
}

.er-transcript-empty span {
    font-size: 0.85rem;
}

.er-msg {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: erMsgIn 0.3s cubic-bezier(0.4,0,0.2,1);
}

.er-msg--medico {
    align-self: flex-end;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.er-msg--paciente {
    align-self: flex-start;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.06);
    color: var(--ipad-text);
    border-bottom-left-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.er-msg--sistema {
    align-self: center;
    background: rgba(139,92,246,0.06);
    color: var(--ipad-text-muted);
    font-size: 0.8rem;
    text-align: center;
    border-radius: 10px;
    padding: 8px 14px;
}

@keyframes erMsgIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Controls */

.er-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.er-mic-btn-sm {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.er-mic-btn-sm.recording {
    animation: erPulse 1.5s infinite;
}

.er-mic-btn-sm.recording:hover {
    opacity: 0.9;
}

.er-mic-btn-sm svg {
    pointer-events: none;
    width: 30px;
    height: 30px;
}

@keyframes erPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
    50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}

.er-input-row {
    display: flex;
    gap: 8px;
}

.er-input {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.8);
    color: var(--ipad-text);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
}

.er-input:focus {
    border-color: rgba(139,92,246,0.3);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
}

.er-send-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(139,92,246,0.25);
    flex-shrink: 0;
}

.er-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139,92,246,0.35);
}

.er-send-btn svg {
    width: 18px;
    height: 18px;
}

.er-input-hint {
    font-size: 0.75rem;
    color: var(--ipad-text-muted);
    text-align: center;
    margin: 0;
}

.er-evaluation {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 16px;
    flex-shrink: 0;
}

.er-evaluation h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--ipad-text);
}

/* === PATIENT COLUMN === */

.er-patient-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 20px 16px;
    border-left: 1px solid rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.3);
    overflow-y: auto;
}

.er-patient-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 16px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 18px;
}

.er-avatar-wrap {
    position: relative;
    width: 100px;
    height: 100px;
}

.er-avatar-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
    animation: erAvatarGlow 3s ease-in-out infinite;
}

@keyframes erAvatarGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

.er-avatar-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(139,92,246,0.2);
    position: relative;
    z-index: 1;
}

.er-patient-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ipad-text);
    text-align: center;
    margin: 0;
}

.er-exams-card {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 16px;
}

.er-exams-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ipad-text-muted);
    margin-bottom: 12px;
}

.er-exams-header svg {
    width: 16px;
    height: 16px;
    color: #8b5cf6;
}

.er-exams-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.er-exams-empty {
    font-size: 0.8rem;
    color: var(--ipad-text-muted);
    text-align: center;
    margin: 8px 0;
    opacity: 0.7;
}

.er-exam-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(139,92,246,0.04);
    border: 1px solid rgba(139,92,246,0.1);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--ipad-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.er-exam-item:hover {
    background: rgba(139,92,246,0.08);
}

.er-exam-item svg {
    width: 14px;
    height: 14px;
    color: #8b5cf6;
    flex-shrink: 0;
}

/* === DARK MODE === */

body.dark-mode .er-header {
    background: rgba(30,30,30,0.72);
    border-bottom-color: rgba(255,255,255,0.06);
}

body.dark-mode .er-back-btn {
    color: #a78bfa;
}

body.dark-mode .er-back-btn:hover {
    background: rgba(167,139,250,0.1);
}

body.dark-mode .er-title {
    color: #f1f5f9;
}

body.dark-mode .er-timer-badge {
    background: linear-gradient(135deg, rgba(22,101,52,0.3), rgba(22,101,52,0.2));
    border-color: rgba(34,197,94,0.25);
    color: #86efac;
}

body.dark-mode .er-timer-badge svg {
    color: #4ade80;
}

body.dark-mode .er-chat-col {
    background: transparent;
}

body.dark-mode .er-command-card {
    background: rgba(139,92,246,0.08);
    border-color: rgba(139,92,246,0.18);
}

body.dark-mode .er-command-text {
    color: #e2e8f0;
}

body.dark-mode .er-transcript {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}

body.dark-mode .er-msg--paciente {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.08);
    color: #e2e8f0;
}

body.dark-mode .er-msg--sistema {
    background: rgba(139,92,246,0.1);
    color: #a78bfa;
}

/* mic btn color is controlled via inline style */

body.dark-mode .er-input {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    color: #f1f5f9;
}

body.dark-mode .er-input:focus {
    border-color: rgba(167,139,250,0.4);
}

body.dark-mode .er-patient-col {
    border-left-color: rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}

body.dark-mode .er-patient-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.06);
}

body.dark-mode .er-avatar-img {
    border-color: rgba(167,139,250,0.3);
}

body.dark-mode .er-patient-name {
    color: #f1f5f9;
}

body.dark-mode .er-exams-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.06);
}

body.dark-mode .er-exam-item {
    background: rgba(167,139,250,0.06);
    border-color: rgba(167,139,250,0.12);
    color: #e2e8f0;
}

body.dark-mode .er-evaluation {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
}

body.dark-mode .er-evaluation h3 {
    color: #f1f5f9;
}

/* Transcript bubble classes used by JS (osce_engine.js) */

.transcript-bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: erMsgIn 0.3s cubic-bezier(0.4,0,0.2,1);
    word-wrap: break-word;
}

.transcript-student {
    align-self: flex-end;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.transcript-ai {
    align-self: flex-start;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.06);
    color: var(--ipad-text);
    border-bottom-left-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.transcript-system {
    align-self: center;
    background: rgba(139,92,246,0.06);
    color: var(--ipad-text-muted);
    font-size: 0.8rem;
    text-align: center;
    border-radius: 10px;
    padding: 8px 14px;
    max-width: 90%;
}

body.dark-mode .transcript-ai {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.08);
    color: #e2e8f0;
}

body.dark-mode .transcript-system {
    background: rgba(139,92,246,0.1);
    color: #a78bfa;
}

/* btn-outline-purple used by exam list in JS */

.btn-outline-purple {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 0.85rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    background: rgba(139,92,246,0.04);
    border: 1px solid rgba(139,92,246,0.15);
    color: var(--ipad-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline-purple:hover {
    background: rgba(139,92,246,0.1);
    border-color: rgba(139,92,246,0.3);
}

body.dark-mode .btn-outline-purple {
    background: rgba(167,139,250,0.06);
    border-color: rgba(167,139,250,0.15);
    color: #e2e8f0;
}

body.dark-mode .btn-outline-purple:hover {
    background: rgba(167,139,250,0.12);
}

/* === RESPONSIVE === */

@media (max-width: 900px) {
    .er-layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .er-patient-col {
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.06);
        flex-direction: row;
        overflow-x: auto;
        padding: 16px;
    }

    .er-patient-card {
        min-width: 160px;
        padding: 16px;
    }

    .er-avatar-wrap {
        width: 72px;
        height: 72px;
    }

    .er-avatar-img {
        width: 72px;
        height: 72px;
    }

    .er-exams-card {
        min-width: 200px;
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
    .er-header {
        padding: 10px 14px;
        gap: 8px;
    }

    .er-title {
        font-size: 0.85rem;
    }

    .er-timer-badge {
        padding: 6px 10px;
        font-size: 0.85rem;
    }

    .er-finish-btn {
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    .er-chat-col {
        padding: 12px;
    }

    .er-transcript {
        padding: 12px;
    }

    .er-msg {
        max-width: 90%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TRANSIÇÃO DE ENTRADA NA ESTAÇÃO (VÍDEO)
   ═══════════════════════════════════════════════════════════════ */
.station-transition-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    background: rgb(0,0,0);
    pointer-events: none;
}
.station-transition-overlay.active {
    display: flex;
    animation: stFadeIn 0.4s ease both;
}
.station-transition-overlay.fade-out {
    animation: stFadeOut 0.5s ease both;
}
@keyframes stFadeIn {
    from { background: rgba(0,0,0,0); }
    to   { background: rgb(0,0,0); }
}
@keyframes stFadeOut {
    from { background: rgb(0,0,0); }
    to   { background: rgba(0,0,0,0); }
}

/* Vídeo da porta */
.station-transition-video {
    max-height: 90vh;
    max-width: 90vw;
    object-fit: contain;
    border-radius: 4px;
}