/*
 * FI Study UI extension / 20260912_1
 * No global button/iframe/player rules. Existing widget assets stay unchanged.
 * The layer attribute and draggable class are attached only on Study pages.
 */
#fi-member-ai-root[data-fi-study-ui-layer="1"] {
    z-index: 2147483647;
}
#fi-member-ai-root[data-fi-study-ui-layer="1"] .fi-ai-launcher.fi-study-ui-draggable {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    /* Avoid position jumps caused by the widget's hover translateY(-2px). */
    transform: none !important;
}
#fi-member-ai-root[data-fi-study-ui-layer="1"] .fi-ai-launcher.fi-study-ui-dragging {
    cursor: grabbing;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .36);
}
#fi-member-ai-root[data-fi-study-ui-layer="1"] .fi-ai-launcher.fi-study-ui-draggable:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

/* Newly created controls only. Existing tab/share/playlist buttons stay intact. */
#fi-study-ui-focus-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 6px 10px;
    margin: 0 0px 0 0; 
    border: 1px solid #106cdb;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font: 700 12px/1.3 Arial, "Noto Sans KR", sans-serif;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}
#fi-study-ui-focus-enter:hover { background: #f1f5f9; border-color: #94a3b8; }
#fi-study-ui-focus-enter:disabled { opacity: .5; cursor: wait; }
#fi-study-ui-focus-enter svg { width: 15px; height: 15px; flex: 0 0 auto; }
#fi-study-ui-focus-enter:focus-visible,
#fi-study-ui-focus-exit:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 2px;
}

#fi-study-ui-focusbar[hidden] { display: none !important; }
#fi-study-ui-focusbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(44px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(10px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #dbe3ee;
    background: #fff;
    color: #334155;
    box-sizing: border-box;
    font: 700 12px/1.3 Arial, "Noto Sans KR", sans-serif;
    /* Deliberately below the original AI backdrop/drawer. */
    z-index: 2147481900;
}
#fi-study-ui-focus-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fi-study-ui-focus-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font: inherit;
    cursor: pointer;
}
#fi-study-ui-focus-exit:hover { background: #e8f0fe; }
#fi-study-ui-focus-exit svg { width: 14px; height: 14px; }

/*
 * All learning-layout overrides are conditional.
 * Removing this class restores the original CSS and DOM structure.
 * Do not put transform/filter/contain on ancestors: fixed mobile controls
 * must continue to use the viewport as their containing block.
 */
html.fi-study-ui-focus-active {
    --fi-study-ui-bar-height: calc(44px + env(safe-area-inset-top, 0px));
}
html.fi-study-ui-focus-active #learning_layout {
    position: fixed;
    top: var(--fi-study-ui-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - var(--fi-study-ui-bar-height));
    height: calc(100dvh - var(--fi-study-ui-bar-height));
    margin: 0;
}
html.fi-study-ui-focus-active #learning_layout > .learning-sidebar,
html.fi-study-ui-focus-active #learning_layout > .learning-content > #study_tabs_nav {
    display: none !important;
}
html.fi-study-ui-focus-active #learning_layout > .learning-content {
    width: 100%;
    height: 100%;
    min-height: 0;
}
html.fi-study-ui-focus-active #learning_layout > .learning-content > #main_display_center {
    min-height: 0;
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
}
/* No display/src/height overrides for audio, video, PDF or LMS elements. */