/* mod_ktvhlesson styles */
/* Phase 2: Enhanced with image_viewer, related_videos, page_sidebar, mobile_tabs, page_builder */

/* ========================================
   Player container
   ======================================== */
.ktvhlesson-player {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.ktvhlesson-player-body {
    position: relative;
    transition: opacity 0.18s ease;
}

.ktvhlesson-player-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.ktvhlesson-is-loading .ktvhlesson-player-body {
    opacity: 0.45;
}

.ktvhlesson-is-switching .ktvhlesson-player-body {
    animation: ktvhlesson-page-fade-in 0.22s ease;
}

@keyframes ktvhlesson-page-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ktvhlesson-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.75rem;
}

.ktvhlesson-title {
    font-size: 1.4rem;
    font-weight: 600;
}

.ktvhlesson-breadcrumb {
    font-size: 0.9rem;
}

/* ========================================
   Video container - responsive 16:9
   ======================================== */
.ktvhlesson-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.ktvhlesson-video-container iframe,
.ktvhlesson-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========================================
   Protected image styles
   ======================================== */
.ktvhlesson-protected-image {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    max-width: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ktvhlesson-document-image {
    position: relative;
}

/* ========================================
   Image Viewer Component
   ======================================== */
.ktvhlesson-image-viewer {
    position: relative;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.ktvhlesson-iv-toolbar {
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.ktvhlesson-iv-info {
    gap: 0.5rem;
}

.ktvhlesson-iv-toolbar .btn {
    min-width: 36px;
    min-height: 36px;
}

.ktvhlesson-iv-viewport {
    position: relative;
    overflow: auto;
    min-height: 400px;
    max-height: 80vh;
    cursor: grab;
    background: #f0f0f0;
}

.ktvhlesson-iv-viewport:focus {
    outline: 2px solid #0f6cbf;
    outline-offset: -2px;
}

.ktvhlesson-iv-canvas {
    transition: transform 0.15s ease-out;
    transform-origin: top left;
    position: relative;
}

.ktvhlesson-iv-slide {
    position: relative;
}

.ktvhlesson-iv-slide {
    display: none;
}

.ktvhlesson-iv-slide.active {
    display: block;
}

.ktvhlesson-iv-image {
    display: block;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

/* Watermark overlay */
.ktvhlesson-iv-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: var(--ktvhlesson-watermark-opacity, 0.12);
    z-index: 2;
}

.ktvhlesson-iv-watermark-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transform: rotate(-30deg);
}

.ktvhlesson-iv-watermark-logo {
    max-width: min(220px, 32vw);
    max-height: min(120px, 18vh);
    object-fit: contain;
}

.ktvhlesson-iv-watermark span {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Fullscreen mode */
body.ktvhlesson-iv-fullscreen-open {
    overflow: hidden;
}

.ktvhlesson-iv-fullscreen {
    position: fixed;
    inset: 1rem;
    z-index: 9999;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
}

.ktvhlesson-iv-fullscreen .ktvhlesson-iv-toolbar {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
}

.ktvhlesson-iv-fullscreen .ktvhlesson-iv-viewport {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    height: auto;
    background: #edf3f7;
}

/* ========================================
   Page Sidebar Component
   ======================================== */
.ktvhlesson-page-sidebar .card-header {
    background: #f8f9fa;
}

.ktvhlesson-page-list {
    max-height: 600px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.ktvhlesson-page-list .list-group-item {
    border-left: 3px solid transparent;
    transition: border-color 0.2s, background-color 0.2s;
    padding: 0.5rem 0.75rem;
}

.ktvhlesson-page-list .list-group-item.active {
    border-left-color: #0f6cbf;
    background-color: #e8f4fd;
    color: #333;
}

.ktvhlesson-drawer {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 35, 56, 0.08);
    overflow: hidden;
}

.ktvhlesson-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid #eef2f6;
    background: linear-gradient(180deg, #fbfcfe 0%, #f3f7fb 100%);
}

.ktvhlesson-drawer-tablist {
    flex: 1 1 auto;
    min-width: 0;
}

.ktvhlesson-drawer-tablist .btn {
    border-radius: 999px;
    min-width: 0;
}

.ktvhlesson-drawer-tablist .btn.active {
    background: #0f6cbf;
    border-color: #0f6cbf;
    color: #fff;
}

.ktvhlesson-drawer-card__header,
.ktvhlesson-drawer-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.9rem;
}

.ktvhlesson-drawer-card__body {
    padding: 0 1rem 1rem;
    color: #23384d;
}

.ktvhlesson-note-list {
    display: grid;
    gap: 0.75rem;
}

.ktvhlesson-note-item {
    width: 100%;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 20px;
    gap: 0.8rem;
    align-items: center;
    padding: 0.85rem 0.9rem;
    border: 1px solid #e4ebf3;
    border-radius: 14px;
    background: #f9fbfd;
    color: #1f354b;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.ktvhlesson-note-item:hover,
.ktvhlesson-note-item:focus {
    border-color: #0f6cbf;
    box-shadow: 0 10px 22px rgba(15, 108, 191, 0.12);
    transform: translateY(-1px);
}

.ktvhlesson-note-item.is-current {
    border-color: #0f6cbf;
    background: #eef7ff;
}

.ktvhlesson-note-item__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    border-radius: 999px;
    background: #dff1ef;
    color: #23736b;
    font-weight: 700;
    font-size: 0.84rem;
}

.ktvhlesson-note-item__content {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
}

.ktvhlesson-note-item__content strong,
.ktvhlesson-note-item__content small {
    display: block;
}

.ktvhlesson-note-item__content small {
    color: #63778c;
    line-height: 1.45;
}

.ktvhlesson-note-item__action {
    color: #7e8fa2;
    text-align: right;
}

.ktvhlesson-note-modal .modal-dialog {
    max-width: 820px;
}

.ktvhlesson-note-modal__body {
    color: #23384d;
    line-height: 1.7;
}

.ktvhlesson-note-modal__body > :last-child {
    margin-bottom: 0;
}

.ktvhlesson-drawer-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 1rem;
    text-align: center;
    color: #7c8ea1;
}

.ktvhlesson-download-group {
    padding: 0 1rem 1rem;
}

.ktvhlesson-download-group__title {
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #60758b;
    text-transform: uppercase;
}

.ktvhlesson-download-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.8rem 0;
    color: inherit;
    text-decoration: none;
    border-top: 1px solid #eef2f6;
}

.ktvhlesson-download-group .ktvhlesson-download-item:first-of-type {
    border-top: 0;
}

.ktvhlesson-download-item__content {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.ktvhlesson-download-item__content strong,
.ktvhlesson-download-item__content small {
    display: block;
}

.ktvhlesson-download-item__content small,
.ktvhlesson-download-item__meta,
.ktvhlesson-download-item__action {
    color: #6f8295;
    font-size: 0.85rem;
}

.ktvhlesson-onboarding-banner {
    border-radius: 14px;
}

.ktvhlesson-onboarding-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
    gap: 1.25rem;
    margin: 0 auto 1.5rem;
    padding: 1.4rem;
    max-width: 1200px;
    border-radius: 24px;
    background: linear-gradient(135deg, #f4f8ff 0%, #fff8eb 100%);
    border: 1px solid rgba(15, 108, 191, 0.08);
    box-shadow: 0 18px 40px rgba(14, 48, 77, 0.08);
}

.ktvhlesson-onboarding-hero__eyebrow {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: #0f6cbf;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.ktvhlesson-onboarding-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.ktvhlesson-onboarding-hero__stats {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.ktvhlesson-onboarding-progress {
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: 0.9rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
}

.ktvhlesson-onboarding-progress__value {
    font-size: 2rem;
    font-weight: 700;
    color: #0f6cbf;
}

.ktvhlesson-onboarding-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.ktvhlesson-onboarding-hero__list {
    display: grid;
    gap: 0.6rem;
}

.ktvhlesson-onboarding-hero__item {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
    color: inherit;
    text-decoration: none;
}

.ktvhlesson-onboarding-hero__item.is-complete {
    opacity: 0.72;
}

.ktvhlesson-onboarding-inline-item {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 0 1.5rem;
    list-style: none;
    background: transparent;
    border: 0;
}

.ktvhlesson-onboarding-inline-item .ktvhlesson-onboarding-hero {
    margin-bottom: 0;
}

.ktvhlesson-onboarding-widget {
    /* Reserve a dedicated dock above the AI launcher for future notification-style widgets. */
    --ktvhlesson-onboarding-widget-safe-offset: 300px;
    position: fixed;
    right: 0.25rem;
    bottom: calc(1.5rem + var(--ktvhlesson-onboarding-widget-safe-offset));
    z-index: 40;
}

.ktvhlesson-onboarding-widget__toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: #0f6cbf;
    color: #fff;
    box-shadow: 0 16px 28px rgba(15, 108, 191, 0.32);
}

.ktvhlesson-onboarding-widget__badge {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffc107;
    color: #212529;
    font-size: 0.75rem;
    font-weight: 700;
}

.ktvhlesson-onboarding-widget__panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: min(360px, calc(100vw - 2rem));
    padding: 1rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e6ebf2;
    box-shadow: 0 24px 44px rgba(16, 38, 59, 0.18);
}

.ktvhlesson-onboarding-widget__header,
.ktvhlesson-onboarding-widget__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ktvhlesson-onboarding-widget__items {
    display: grid;
    gap: 0.55rem;
    margin: 0.9rem 0;
}

.ktvhlesson-onboarding-widget__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.8rem;
    border-radius: 12px;
    background: #f6f9fc;
    color: inherit;
    text-decoration: none;
}

.ktvhlesson-onboarding-widget__item.is-complete {
    opacity: 0.7;
}

/* ========================================
   Conversation Hub
   ======================================== */
body.ktvhlesson-conversation-hub-page #page.drawers .main-inner,
body.ktvhlesson-conversation-hub-page #page .main-inner {
    max-width: none;
}

body.ktvhlesson-conversation-hub-page #region-main {
    padding: 0;
    border: 0;
    background: transparent;
}

.ktvhlesson-conversation-hub {
    --ktvh-hub-viewport-height: 78vh;
    --ktvh-hub-bg: #eef3f9;
    --ktvh-hub-surface: #ffffff;
    --ktvh-hub-surface-alt: #f6f9fd;
    --ktvh-hub-surface-soft: #eaf1fb;
    --ktvh-hub-border: #d8e3f1;
    --ktvh-hub-border-strong: #c4d4e8;
    --ktvh-hub-ink: #17324d;
    --ktvh-hub-muted: #6b8098;
    --ktvh-hub-accent: #0a65d8;
    --ktvh-hub-accent-soft: #e5f0ff;
    --ktvh-hub-accent-strong: #0c56b5;
    --ktvh-hub-success-soft: #ebf8f1;
    --ktvh-hub-shadow: 0 22px 48px rgba(19, 42, 72, 0.08);
    width: 100%;
    max-width: none;
    min-height: var(--ktvh-hub-viewport-height);
    height: auto;
    padding: 0.25rem 0 1rem;
    color: var(--ktvh-hub-ink);
}

.ktvhlesson-conversation-app {
    min-height: var(--ktvh-hub-viewport-height);
}

.ktvhlesson-conversation-shell {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1.3fr) minmax(320px, 380px);
    gap: 1rem;
    min-width: 0;
    min-height: var(--ktvh-hub-viewport-height);
    height: auto;
}

.ktvhlesson-conversation-pane {
    min-width: 0;
    min-height: 0;
}

.ktvhlesson-pane-card {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: var(--ktvh-hub-viewport-height);
    border: 1px solid var(--ktvh-hub-border);
    border-radius: 28px;
    background: var(--ktvh-hub-surface);
    box-shadow: var(--ktvh-hub-shadow);
    overflow: hidden;
}

.ktvhlesson-pane-card--list {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.ktvhlesson-pane-card--detail {
    background:
        radial-gradient(circle at top right, rgba(10, 101, 216, 0.08), transparent 28%),
        linear-gradient(180deg, #f7f9fd 0%, #edf2f8 100%);
}

.ktvhlesson-pane-card--info {
    background: #f8fbff;
}

.ktvhlesson-chatlist-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--ktvh-hub-border);
}

.ktvhlesson-info-section__kicker,
.ktvhlesson-info-overview__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ktvh-hub-muted);
}

.ktvhlesson-chatlist-header__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.18rem;
    min-width: 108px;
    padding: 0.75rem 0.9rem;
    border-radius: 18px;
    background: var(--ktvh-hub-surface-soft);
    color: var(--ktvh-hub-muted);
    font-size: 0.78rem;
    text-align: right;
}

.ktvhlesson-chatlist-header__stat strong {
    color: var(--ktvh-hub-accent-strong);
    font-size: 0.96rem;
}

.ktvhlesson-chatlist-search {
    position: relative;
    padding: 0.95rem 1.1rem 0.7rem;
}

.ktvhlesson-chatlist-search .form-control {
    height: 46px;
    padding-left: 2.9rem;
    border: 1px solid transparent;
    border-radius: 16px;
    background: #edf2f9;
    box-shadow: none;
}

.ktvhlesson-chatlist-search .form-control:focus {
    border-color: rgba(10, 101, 216, 0.3);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(10, 101, 216, 0.08);
}

.ktvhlesson-chatlist-search__icon {
    position: absolute;
    top: 50%;
    left: 2rem;
    width: 14px;
    height: 14px;
    border: 2px solid #7c90a8;
    border-radius: 999px;
    transform: translateY(-45%);
    pointer-events: none;
}

.ktvhlesson-chatlist-search__icon::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: #7c90a8;
    transform: rotate(45deg);
}

.ktvhlesson-chatlist-filter {
    padding: 0 1.1rem 0.9rem;
    border-bottom: 1px solid var(--ktvh-hub-border);
}

.ktvhlesson-chatlist-filter__tabs {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
}

.ktvhlesson-chatlist-filter__tabs span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--ktvh-hub-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.ktvhlesson-chatlist-filter__tabs .is-active {
    background: var(--ktvh-hub-accent-soft);
    color: var(--ktvh-hub-accent-strong);
}

.ktvhlesson-chatlist-filter__control {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

.ktvhlesson-chatlist-filter__control label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ktvh-hub-muted);
}

.ktvhlesson-chatlist-filter__control .custom-select {
    height: 42px;
    border-radius: 14px;
    border-color: var(--ktvh-hub-border);
    background-color: #fff;
}

.ktvhlesson-conversation-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
}

.ktvhlesson-conversation-list__status {
    padding: 0 1rem 1rem;
    color: var(--ktvh-hub-muted);
    font-size: 0.78rem;
}

.ktvhlesson-conversation-list__status[data-tone="error"],
.ktvhlesson-thread-composer__status[data-tone="error"] {
    color: #b3261e;
}

.ktvhlesson-conversation-list__empty,
.ktvhlesson-info-empty {
    padding: 1rem;
    border: 1px dashed var(--ktvh-hub-border-strong);
    border-radius: 20px;
    text-align: center;
    color: var(--ktvh-hub-muted);
    background: rgba(255, 255, 255, 0.92);
}

.ktvhlesson-conversation-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 0.95rem;
    margin-bottom: 0.55rem;
    border: 1px solid transparent;
    border-radius: 18px;
    background: #fff;
    color: inherit;
    text-align: left;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.ktvhlesson-conversation-item:hover,
.ktvhlesson-conversation-item:focus {
    transform: translateY(-1px);
    border-color: rgba(10, 101, 216, 0.18);
    box-shadow: 0 14px 28px rgba(20, 50, 80, 0.08);
    text-decoration: none;
}

.ktvhlesson-conversation-item.is-active {
    border-color: rgba(10, 101, 216, 0.2);
    background: #edf5ff;
    box-shadow: 0 16px 28px rgba(10, 101, 216, 0.12);
}

.ktvhlesson-conversation-item__indicator {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #cad6e6;
    transition: height 0.16s ease, width 0.16s ease, background 0.16s ease;
}

.ktvhlesson-conversation-item.is-active .ktvhlesson-conversation-item__indicator {
    width: 4px;
    height: 34px;
    border-radius: 999px;
    background: var(--ktvh-hub-accent);
}

.ktvhlesson-conversation-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ktvhlesson-conversation-item__row,
.ktvhlesson-message__foot,
.ktvhlesson-message__sender-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.ktvhlesson-conversation-item__row {
    justify-content: space-between;
}

.ktvhlesson-conversation-item__name {
    min-width: 0;
    display: block;
    font-weight: 700;
    line-height: 1.35;
}

.ktvhlesson-conversation-item__time {
    font-size: 0.76rem;
    color: var(--ktvh-hub-muted);
    white-space: nowrap;
}

.ktvhlesson-conversation-item__pill,
.ktvhlesson-conversation-item__tag,
.ktvhlesson-message__source-pill,
.ktvhlesson-message__sender-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 28px;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    font-size: 0.74rem;
    line-height: 1.2;
    background: rgba(10, 101, 216, 0.1);
    color: var(--ktvh-hub-accent-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ktvhlesson-conversation-item__tag,
.ktvhlesson-message__source-pill {
    background: rgba(109, 129, 153, 0.12);
    color: #5f748e;
}

.ktvhlesson-thread-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ktvh-hub-border);
    background: rgba(255, 255, 255, 0.96);
}

.ktvhlesson-thread-topbar__copy {
    min-width: 0;
}

.ktvhlesson-thread-topbar__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.ktvhlesson-thread-topbar__subtitle {
    margin: 0.22rem 0 0;
    color: var(--ktvh-hub-muted);
    font-size: 0.86rem;
}

.ktvhlesson-thread-topbar__actions {
    flex: 0 0 auto;
}

.ktvhlesson-conversation-thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.3rem 1.35rem 0;
}

.ktvhlesson-thread-empty {
    max-width: 420px;
    margin: 12vh auto 0;
    padding: 1.5rem;
    text-align: center;
    border: 1px dashed var(--ktvh-hub-border-strong);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
}

.ktvhlesson-thread-empty h4 {
    margin-bottom: 0.55rem;
}

.ktvhlesson-thread-empty p {
    margin: 0;
    color: var(--ktvh-hub-muted);
}

.ktvhlesson-message {
    display: flex;
    margin-bottom: 1rem;
}

.ktvhlesson-message.is-teacher {
    justify-content: flex-end;
}

.ktvhlesson-message__cluster {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    max-width: min(78%, 760px);
}

.ktvhlesson-message.is-teacher .ktvhlesson-message__cluster {
    align-items: flex-end;
}

.ktvhlesson-message__sender {
    padding: 0 0.2rem;
    font-size: 0.76rem;
    color: var(--ktvh-hub-muted);
    font-weight: 600;
}

.ktvhlesson-message__bubble {
    padding: 0.9rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(10, 101, 216, 0.12);
    background: #fff;
    box-shadow: 0 10px 20px rgba(20, 50, 80, 0.06);
}

.ktvhlesson-message.is-ai .ktvhlesson-message__bubble,
.ktvhlesson-message.is-user .ktvhlesson-message__bubble {
    border-top-left-radius: 8px;
}

.ktvhlesson-message.is-teacher .ktvhlesson-message__bubble {
    background: linear-gradient(180deg, #eaf3ff 0%, #dbeaff 100%);
    border-color: rgba(10, 101, 216, 0.2);
    border-top-right-radius: 8px;
}

.ktvhlesson-message.is-error .ktvhlesson-message__bubble {
    border-color: rgba(239, 141, 26, 0.26);
    background: #fff7eb;
}

.ktvhlesson-message__content {
    line-height: 1.7;
    color: var(--ktvh-hub-ink);
}

.ktvhlesson-message__content code {
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
    background: rgba(23, 50, 77, 0.08);
    color: #0f2740;
}

.ktvhlesson-message__sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin-top: 0.7rem;
}

.ktvhlesson-message__foot {
    padding: 0 0.15rem;
    color: var(--ktvh-hub-muted);
    font-size: 0.76rem;
}

.ktvhlesson-message.is-teacher .ktvhlesson-message__foot {
    justify-content: flex-end;
}

.ktvhlesson-message__page {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(23, 50, 77, 0.08);
}

.ktvhlesson-message__rating {
    color: #bc7b00;
    font-weight: 600;
}

.ktvhlesson-thread-composer {
    display: flex;
    align-items: stretch;
    padding: 0.95rem 1rem 1rem;
    border-top: 1px solid var(--ktvh-hub-border);
    background: rgba(255, 255, 255, 0.98);
}

.ktvhlesson-thread-tool {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ktvh-hub-border);
    border-radius: 12px;
    background: #f7fbff;
    color: #60738f;
}

.ktvhlesson-thread-tool svg {
    width: 18px;
    height: 18px;
}

.ktvhlesson-thread-tool--trigger {
    background: #eef5ff;
    color: var(--ktvh-hub-accent-strong);
}

.ktvhlesson-thread-composer__panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.8rem 0.95rem 0.8rem;
    border: 1px solid var(--ktvh-hub-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(18, 42, 70, 0.06);
}

.ktvhlesson-thread-composer__panel .form-control {
    min-height: 44px;
    max-height: 160px;
    padding: 0;
    border: 0;
    resize: none;
    background: transparent;
    box-shadow: none;
    line-height: 1.55;
}

.ktvhlesson-thread-composer__panel .form-control:focus {
    box-shadow: none;
}

.ktvhlesson-thread-composer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.7rem;
    border-top: 1px solid #edf2f8;
}

.ktvhlesson-thread-composer__actions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ktvhlesson-thread-composer__menuwrap {
    position: relative;
    flex: 0 0 auto;
}

.ktvhlesson-thread-composer__menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.55rem);
    z-index: 2;
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem;
    border: 1px solid var(--ktvh-hub-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 28px rgba(19, 42, 72, 0.12);
}

.ktvhlesson-thread-composer__status {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--ktvh-hub-muted);
}

.ktvhlesson-thread-composer [data-region="reply-submit"] {
    flex: 0 0 auto;
    min-width: 88px;
    border-radius: 999px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.ktvhlesson-info-panel__header {
    padding: 1.05rem 1.15rem 1rem;
    border-bottom: 1px solid var(--ktvh-hub-border);
    background: rgba(255, 255, 255, 0.96);
}

.ktvhlesson-info-panel__header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.ktvhlesson-info-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ktvhlesson-info-section {
    padding: 1rem 1rem 0;
}

.ktvhlesson-info-section:last-child {
    padding-bottom: 1rem;
}

.ktvhlesson-info-overview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.1rem;
    border: 1px solid var(--ktvh-hub-border);
    border-radius: 22px;
    background: #fff;
    margin-bottom: 0.9rem;
}

.ktvhlesson-info-overview__name {
    font-size: 1.2rem;
    line-height: 1.25;
}

.ktvhlesson-info-overview__context {
    color: var(--ktvh-hub-muted);
    line-height: 1.5;
}

.ktvhlesson-info-overview__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.15rem;
}

.ktvhlesson-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.ktvhlesson-info-card {
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--ktvh-hub-border);
    border-radius: 18px;
    background: #fff;
}

.ktvhlesson-info-card__label,
.ktvhlesson-source-item span {
    display: block;
    font-size: 0.76rem;
    color: var(--ktvh-hub-muted);
}

.ktvhlesson-info-card__value {
    display: block;
    margin-top: 0.24rem;
    font-size: 0.96rem;
    line-height: 1.45;
}

.ktvhlesson-source-item {
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.65rem;
    border: 1px solid var(--ktvh-hub-border);
    border-radius: 18px;
    background: #fff;
}

.ktvhlesson-source-item strong {
    display: block;
    margin-bottom: 0.16rem;
}

.ktvhlesson-info-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

.ktvhlesson-info-links .btn {
    width: 100%;
    min-height: 42px;
    border-radius: 14px;
}

@media (max-width: 1539px) {
    .ktvhlesson-conversation-shell {
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(290px, 330px);
    }

    .ktvhlesson-message__cluster {
        max-width: 84%;
    }
}

@media (max-width: 1279px) {
    .ktvhlesson-conversation-shell {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(230px, 0.74fr);
    }

    .ktvhlesson-conversation-pane--info {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    .ktvhlesson-conversation-shell {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(180px, 0.72fr) minmax(0, 1.12fr) minmax(210px, 0.8fr);
    }

    .ktvhlesson-conversation-pane--info {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .ktvhlesson-conversation-hub {
        padding-bottom: 0.5rem;
    }

    .ktvhlesson-chatlist-header,
    .ktvhlesson-thread-topbar,
    .ktvhlesson-thread-composer__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .ktvhlesson-chatlist-header__stat {
        align-items: flex-start;
        text-align: left;
    }

    .ktvhlesson-thread-topbar__actions .btn,
    .ktvhlesson-thread-composer [data-region="reply-submit"] {
        width: 100%;
    }

    .ktvhlesson-conversation-thread {
        padding: 1rem 0.9rem 0;
    }

    .ktvhlesson-message__cluster {
        max-width: 100%;
    }

    .ktvhlesson-thread-composer__actions {
        width: 100%;
    }
}

.ktvhlesson-page-list .list-group-item:hover:not(.active) {
    border-left-color: #ccc;
    background-color: #f8f9fa;
}

.ktvhlesson-ps-item-title {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
}

.ktvhlesson-ps-item-meta {
    margin-top: 2px;
}

.ktvhlesson-ps-item-code {
    font-size: 0.7rem;
    font-family: monospace;
    white-space: nowrap;
}

.ktvhlesson-ps-nav .btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
}

.ktvhlesson-ps-position {
    font-size: 0.75rem;
    min-width: 50px;
    text-align: center;
}

/* Search and filter within sidebar */
.ktvhlesson-ps-search {
    font-size: 0.85rem;
}

/* ========================================
   Related Videos Component
   ======================================== */
.ktvhlesson-related-videos {
    position: relative;
}

.ktvhlesson-rv-header h5 {
    font-size: 1.1rem;
    font-weight: 600;
}

.ktvhlesson-rv-group-header .badge {
    font-size: 0.8rem;
}

.ktvhlesson-rv-item .card-body {
    padding: 0.5rem;
}

.ktvhlesson-rv-item-title {
    font-size: 0.9rem;
}

.ktvhlesson-rv-item-video .ktvhlesson-video-container {
    border-radius: 6px;
}

.ktvhlesson-rv-empty {
    padding: 2rem;
}

/* ========================================
   Mobile Tabs Layout
   ======================================== */
.ktvhlesson-mobile-tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ktvhlesson-mobile-tab-nav::-webkit-scrollbar {
    display: none;
}

.ktvhlesson-mobile-tab-nav .nav-item {
    flex-shrink: 0;
}

.ktvhlesson-mobile-tab-nav .nav-link {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.ktvhlesson-mobile-tab-content {
    min-height: 300px;
}

/* ========================================
   Collapsible sections
   ======================================== */
.ktvhlesson-section-toggle {
    cursor: pointer;
    padding: 0.5rem 0;
}

.ktvhlesson-section-toggle:hover {
    opacity: 0.8;
}

.ktvhlesson-collapse-icon {
    transition: transform 0.2s;
}

.collapsed .ktvhlesson-collapse-icon {
    transform: rotate(-90deg);
}

/* ========================================
   Layout: image_primary
   ======================================== */
.ktvhlesson-layout-image_primary .ktvhlesson-image-area {
    background: #fafafa;
    padding: 0;
    border-radius: 8px;
    border: none;
}

/* ========================================
   Layout: split
   ======================================== */
.ktvhlesson-layout-split .ktvhlesson-main .row > div {
    padding: 0.5rem;
}

/* ========================================
   Layout: mobile_tabs sidebar order
   ======================================== */
.ktvhlesson-layout-mobile_tabs .ktvhlesson-sidebar {
    order: -1;
    margin-bottom: 1rem;
}

/* ========================================
   Empty state
   ======================================== */
.ktvhlesson-empty-state {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ========================================
   Page Builder Admin
   ======================================== */
.ktvhlesson-page-builder {
    max-width: 1200px;
}

.ktvhlesson-pb-drag-handle {
    cursor: grab;
    padding: 0.25rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.ktvhlesson-pb-drag-handle:hover {
    opacity: 1;
}

.ktvhlesson-pb-page.ktvhlesson-pb-dragging {
    opacity: 0.5;
    border: 2px dashed #0f6cbf;
}

.ktvhlesson-pb-drop-above {
    border-top: 3px solid #0f6cbf !important;
}

.ktvhlesson-pb-drop-below {
    border-bottom: 3px solid #0f6cbf !important;
}

.ktvhlesson-pb-saved {
    animation: ktvhlesson-flash 0.5s ease;
}

@keyframes ktvhlesson-flash {
    0% { background-color: transparent; }
    50% { background-color: #d4edda; }
    100% { background-color: transparent; }
}

.ktvhlesson-pb-slot {
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    min-height: 60px;
}

.ktvhlesson-pb-slot-assets .badge {
    font-size: 0.75rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* ========================================
   Mobile responsive
   ======================================== */
@media (max-width: 768px) {
    .ktvhlesson-sidebar {
        margin-top: 1rem;
    }

    .ktvhlesson-page-list {
        max-height: 300px;
    }

    .ktvhlesson-title {
        font-size: 1.1rem;
    }

    .ktvhlesson-iv-viewport {
        min-height: 250px;
        max-height: 60vh;
    }

    .ktvhlesson-iv-fullscreen {
        inset: 0;
        border-radius: 0;
    }

    .ktvhlesson-iv-toolbar .btn-group {
        flex-wrap: wrap;
    }

    .ktvhlesson-iv-toolbar .btn {
        min-width: 44px;
        min-height: 44px;
    }

    .ktvhlesson-rv-group-videos {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ktvhlesson-ps-nav {
        display: none !important;
    }

    .ktvhlesson-mobile-tab-nav .nav-link {
        padding: 0.5rem 0.5rem;
        font-size: 0.8rem;
    }

    .ktvhlesson-tab-label {
        display: none;
    }

    .ktvhlesson-mobile-tab-nav .nav-link .fa {
        font-size: 1.2rem;
    }

    /* Compact sidebar on mobile */
    .ktvhlesson-sidebar-compact .ktvhlesson-page-list {
        max-height: 200px;
    }

    .ktvhlesson-sidebar-compact .card-header h6 {
        font-size: 0.85rem;
    }

    /* Page builder mobile */
    .ktvhlesson-pb-slots .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .ktvhlesson-pb-page-actions .btn {
        padding: 0.15rem 0.3rem;
    }
}

/* Touch-friendly targets */
@media (pointer: coarse) {
    .ktvhlesson-iv-toolbar .btn,
    .ktvhlesson-ps-item,
    .ktvhlesson-mobile-tab-nav .nav-link {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Admin pages */
.ktvhlesson-admin-dashboard .card {
    margin-bottom: 1rem;
}

/* ========================================
   Phase 5: AI Chat Widget
   ======================================== */
.ktvhlesson-ai-chat {
    --ktvhlesson-chat-primary: #0a6fd4;
    --ktvhlesson-chat-primary-soft: #eaf4ff;
    --ktvhlesson-chat-accent: #11b3c7;
    --ktvhlesson-chat-border: #d7e6f5;
    --ktvhlesson-chat-surface: #f4f9ff;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ktvhlesson-chat-border);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.ktvhlesson-ai-launcher {
    position: fixed;
    right: 1px;
    bottom: 68px;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.ktvhlesson-ai-launcher-toggle {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #147a57, #0f8b61);
    color: #fff;
    box-shadow: 0 16px 34px rgba(20, 122, 87, 0.28);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.ktvhlesson-ai-launcher-toggle:hover,
.ktvhlesson-ai-launcher-toggle:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 20px 40px rgba(20, 122, 87, 0.32);
    outline: none;
}

.ktvhlesson-ai-launcher-toggle .fa {
    font-size: 1.35rem;
}

.ktvhlesson-ai-launcher-panel {
    width: min(430px, calc(100vw - 32px));
    max-height: min(78vh, 760px);
    overflow: auto;
    display: none;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

.ktvhlesson-ai-launcher-panel.is-visible {
    display: block;
}

.ktvhlesson-ai-launcher-panel .ktvhlesson-ai-chat {
    margin: 0;
    box-shadow: none;
}

.ai-chat-header {
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, #f8fbff 0%, #edf7ff 62%, #f5fcfb 100%);
    border-bottom: 1px solid rgba(10, 111, 212, 0.12);
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.ai-chat-header-copy {
    min-width: 0;
}

.ai-chat-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #153e67;
    font-size: 1.05rem;
    font-weight: 700;
}

.ai-chat-title .fa {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--ktvhlesson-chat-primary), var(--ktvhlesson-chat-accent));
    box-shadow: 0 10px 22px rgba(10, 111, 212, 0.22);
}

.ai-chat-subtitle {
    margin: 0.6rem 0 0;
    max-width: 720px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #516b84;
}

.ai-scope-badge {
    flex-shrink: 0;
    padding: 0.5rem 0.85rem;
    border: 1px solid #c7ddf7;
    border-radius: 999px;
    background: #fff;
    color: #0b72ba;
    font-weight: 600;
}

.ai-chat-meta {
    padding: 0.7rem 1.1rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    border-bottom: 1px solid rgba(10, 111, 212, 0.1);
    background: rgba(248, 252, 255, 0.92);
}

.ai-chat-origin {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    flex-wrap: nowrap;
}

.ai-chat-origin-label {
    display: none;
}

.ai-chat-origin-badge {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    min-height: 30px;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #eaf4ff;
    color: #0b67b5;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chat-origin-doc {
    display: none;
}

.ai-chat-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ai-chat-actions .btn-link {
    border-radius: 999px;
    padding: 0.32rem 0.68rem;
    color: #0b67b5;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ai-chat-actions .btn-link:hover,
.ai-chat-actions .btn-link:focus {
    background: #eaf4ff;
    text-decoration: none;
}

.ai-chat-actions .btn-link[disabled] {
    color: #9aaabc;
    pointer-events: none;
}

.ai-chat-messages {
    padding: 1rem 1.1rem 1.15rem;
    height: 350px;
    min-height: 350px;
    max-height: 350px;
    overflow-y: auto;
    background: linear-gradient(180deg, #fbfdff 0%, var(--ktvhlesson-chat-surface) 100%);
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.ai-chat-welcome {
    padding: 0.35rem 0 0;
}

.ai-chat-welcome-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    max-width: 620px;
    margin: 0 auto;
    padding: 1rem 1.1rem;
    border: 1px dashed #cfe0f1;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
}

.ai-chat-welcome-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ktvhlesson-chat-primary-soft);
    color: var(--ktvhlesson-chat-primary);
}

.ai-chat-welcome-copy strong {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: #153e67;
}

.ai-chat-welcome-copy--compact {
    display: flex;
    align-items: center;
    min-height: 42px;
}

.ai-chat-welcome-message {
    margin: 0;
    color: #153e67;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.55;
}

.ai-chat-message {
    margin-bottom: 0.85rem;
    display: flex;
}

.ai-chat-message-user {
    justify-content: flex-end;
}

.ai-chat-message-ai,
.ai-chat-message-loading,
.ai-chat-message-error {
    justify-content: flex-start;
}

.ai-chat-bubble {
    max-width: min(86%, 720px);
    padding: 0.8rem 1rem;
    border-radius: 18px;
    font-size: 0.94rem;
    line-height: 1.6;
    word-wrap: break-word;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.ai-chat-bubble-user {
    background: linear-gradient(135deg, #0a6fd4 0%, #0c8bd9 100%);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.ai-chat-bubble-ai {
    background: #fff;
    border: 1px solid #dde8f4;
    border-bottom-left-radius: 6px;
}

.ai-chat-bubble-error {
    border-radius: 8px;
    box-shadow: none;
}

.ai-chat-answer code {
    background: #eef5fb;
    padding: 0.15em 0.35em;
    border-radius: 5px;
    font-size: 0.85em;
}

.ai-chat-sources .badge {
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
    padding: 0.38rem 0.55rem;
    border: 1px solid #d8e5f4;
    border-radius: 999px;
    background: #f7fbff;
    color: #46698d;
    font-size: 0.72rem;
    font-weight: 600;
}

.ktvhlesson-ai-chat .ai-chat-sources,
.ktvhlesson-ai-chat .ai-chat-rating {
    display: none !important;
}

.ai-chat-rating {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
}

.ai-chat-rating .ai-rating-btn {
    font-size: 0.85rem;
    padding: 0 2px;
    text-decoration: none;
}

.ai-chat-input-area {
    padding: 1rem 1.1rem 1.15rem;
    border-top: 1px solid rgba(10, 111, 212, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, #fff 100%);
}

.ai-chat-input-area .input-group {
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.35rem 0.3rem 0.95rem;
    border: 1px solid var(--ktvhlesson-chat-border);
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ai-chat-input-area .form-control {
    min-height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ai-chat-input-area .form-control:focus {
    background: transparent;
    box-shadow: none;
}

.ai-chat-input-area .form-control::placeholder {
    color: #8798ab;
}

.ai-chat-input-area .input-group-append {
    margin-left: 0;
}

.ai-chat-input-area .btn {
    border-radius: 50%;
    width: 46px;
    height: 46px;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ktvhlesson-chat-primary), var(--ktvhlesson-chat-accent));
    box-shadow: 0 12px 24px rgba(10, 111, 212, 0.2);
}

.ai-chat-input-area .btn:hover,
.ai-chat-input-area .btn:focus {
    background: linear-gradient(135deg, #0866c5, #0fa2b6);
    box-shadow: 0 14px 26px rgba(10, 111, 212, 0.24);
}

/* ========================================
   Phase 5: Search Results
   ======================================== */
.ktvhlesson-search-container {
    position: relative;
}

.ktvhlesson-search-results-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
}

.search-result-item {
    cursor: pointer;
    transition: background-color 0.15s;
}

.search-result-item:hover {
    background-color: #f0f7ff;
}

.search-result-semantic {
    border-left: 3px solid #6f42c1;
}

.search-result-snippet {
    font-style: italic;
}

/* ========================================
   Phase 5: Protected Viewer Enhanced
   ======================================== */
.ktvhlesson-iv-watermark-tiled {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.ktvhlesson-iv-watermark-tiled span {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.06);
    transform: rotate(-30deg);
    white-space: nowrap;
    padding: 2rem 3rem;
}

/* ========================================
   Phase 5: Openclaw Status Admin
   ======================================== */
.ktvhlesson-openclaw-status .progress {
    border-radius: 4px;
}

.ktvhlesson-openclaw-status .card {
    border-radius: 8px;
}

.ktvhlesson-openclaw-status .h3,
.ktvhlesson-openclaw-status .h4 {
    font-weight: 700;
}

/* ========================================
   Phase 5: Mobile adjustments
   ======================================== */
@media (max-width: 768px) {
    .ai-chat-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ai-scope-badge {
        align-self: flex-start;
    }

    .ai-chat-meta {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
    }

    .ai-chat-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .ai-chat-messages {
        height: 350px;
        min-height: 350px;
        max-height: 350px;
    }

    .ai-chat-bubble {
        max-width: 95%;
    }

    .ai-chat-input-area .input-group {
        padding-left: 0.8rem;
    }

    .ktvhlesson-openclaw-status .row .col-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   Course selector widget
   ======================================== */
.ktvhlesson-course-selector {
    max-width: 700px;
}

.cs-category-group {
    margin-bottom: 0.75rem;
}

.cs-category-header {
    font-size: 0.8rem;
    color: #6c757d;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 0.25rem;
}

.cs-course-item {
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    transition: background-color 0.1s;
}

.cs-course-item:hover {
    background-color: #f8f9fa;
}

.cs-course-item label {
    font-weight: normal;
    cursor: pointer;
}

.cs-course-name {
    font-size: 0.9rem;
}

.badge-sm {
    font-size: 0.7rem;
    padding: 0.15em 0.4em;
    vertical-align: middle;
}

#cs-selection-summary {
    font-size: 0.85rem;
}

#cs-json-editor {
    font-size: 0.8rem;
}

/* ========================================
   Course summary on course page
   ======================================== */
.ktvhlesson-course-summary {
    --ktvhlesson-course-accent: #0c7a7d;
    --ktvhlesson-course-accent-strong: #0b5e61;
    --ktvhlesson-course-accent-soft: #e5f7f5;
    --ktvhlesson-course-ink: #17324d;
    --ktvhlesson-course-muted: #5a7389;
    --ktvhlesson-course-border: #d9e6ef;
    margin-top: 0.85rem;
    padding: 1rem 1.05rem 1.1rem;
    border: 1px solid var(--ktvhlesson-course-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(12, 122, 125, 0.1), transparent 36%),
        linear-gradient(180deg, #fcfeff 0%, #f6fbfd 100%);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.ktvhlesson-course-summary__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.ktvhlesson-course-summary__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
}

.ktvhlesson-course-summary__count {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: var(--ktvhlesson-course-accent-soft);
    color: var(--ktvhlesson-course-accent-strong);
    font-size: 0.82rem;
    font-weight: 700;
}

.ktvhlesson-course-summary__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.78rem 0.98rem;
    border: 1px solid #c8dae6;
    border-radius: 15px;
    background: #fff;
    color: var(--ktvhlesson-course-ink);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.ktvhlesson-course-summary__open:hover,
.ktvhlesson-course-summary__open:focus {
    color: var(--ktvhlesson-course-accent-strong);
    text-decoration: none;
    border-color: var(--ktvhlesson-course-accent);
    box-shadow: 0 14px 26px rgba(12, 122, 125, 0.12);
    transform: translateY(-1px);
}

.ktvhlesson-course-summary__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.ktvhlesson-course-summary__column {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    min-width: 0;
}

.ktvhlesson-course-summary__page {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.78rem 0.85rem;
    border: 1px solid #e3edf4;
    border-radius: 16px;
    background: #fff;
    color: var(--ktvhlesson-course-ink);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.ktvhlesson-course-summary__page:hover,
.ktvhlesson-course-summary__page:focus {
    color: var(--ktvhlesson-course-accent-strong);
    text-decoration: none;
    border-color: rgba(12, 122, 125, 0.44);
    box-shadow: 0 16px 28px rgba(12, 122, 125, 0.1);
    transform: translateY(-1px);
}

.ktvhlesson-course-summary__page-index {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #edf8f8, #def2f2);
    color: var(--ktvhlesson-course-accent-strong);
    font-size: 0.82rem;
    font-weight: 700;
}

.ktvhlesson-course-summary__page-title {
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    font-weight: 600;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ktvhlesson-course-summary__page-chevron {
    color: #7c93a7;
    font-size: 0.9rem;
}

.ktvhlesson-course-summary__empty {
    padding: 0.95rem 1rem;
    border: 1px dashed #c8d9e5;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ktvhlesson-course-muted);
    line-height: 1.5;
}

.ktvhlesson-reference-index .no-overflow {
    overflow: visible;
}

.ktvhlesson-aggregate-index__summary {
    color: var(--ktvhlesson-course-muted);
    font-weight: 500;
}

.ktvhlesson-aggregate-index__intro {
    color: var(--ktvhlesson-course-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: right;
}

.ktvhlesson-aggregate-index__tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.ktvhlesson-aggregate-index__tab-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid #dbe8f0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ktvhlesson-course-ink);
    text-align: left;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ktvhlesson-aggregate-index__tab-button:hover,
.ktvhlesson-aggregate-index__tab-button:focus {
    border-color: rgba(12, 122, 125, 0.34);
    box-shadow: 0 14px 32px rgba(12, 122, 125, 0.14);
    color: var(--ktvhlesson-course-accent-strong);
    transform: translateY(-1px);
    outline: none;
}

.ktvhlesson-aggregate-index__tab-button.is-active {
    border-color: rgba(12, 122, 125, 0.42);
    background: linear-gradient(135deg, #f3fbfb, #e8f7f7);
    box-shadow: 0 16px 34px rgba(12, 122, 125, 0.16);
    color: var(--ktvhlesson-course-accent-strong);
}

.ktvhlesson-aggregate-index__tab-label {
    font-weight: 700;
    line-height: 1.4;
}

.ktvhlesson-aggregate-index__tab-count {
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #edf8f8, #def2f2);
    color: var(--ktvhlesson-course-accent-strong);
    font-size: 0.82rem;
    font-weight: 700;
}

.ktvhlesson-aggregate-index__panels {
    margin-top: 1.15rem;
}

.ktvhlesson-aggregate-index__panel {
    border: 1px solid #dbe8f0;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(12, 122, 125, 0.09), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 253, 0.96));
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.ktvhlesson-aggregate-index__panel[hidden] {
    display: none !important;
}

.ktvhlesson-aggregate-index__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
}

.ktvhlesson-aggregate-index__group-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ktvhlesson-course-ink);
    line-height: 1.4;
}

.ktvhlesson-aggregate-index__panel-meta {
    color: var(--ktvhlesson-course-muted);
    font-size: 0.82rem;
    font-weight: 600;
    margin-left: auto;
    text-align: right;
}

.ktvhlesson-aggregate-index__panel-body {
    padding: 0 1rem 1rem;
}

.ktvhlesson-aggregate-index__panel-columns {
    margin-top: 0;
}

.ktvhlesson-aggregate-index__content {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.ktvhlesson-aggregate-index__meta {
    color: var(--ktvhlesson-course-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.ktvhlesson-aggregate-index__page--disabled {
    opacity: 0.78;
    box-shadow: none;
}

.ktvhlesson-aggregate-index__page--disabled:hover,
.ktvhlesson-aggregate-index__page--disabled:focus {
    color: var(--ktvhlesson-course-ink);
    border-color: #e3edf4;
    box-shadow: none;
    transform: none;
}

@media (min-width: 768px) {
    .path-course-view .activity.modtype_ktvhlesson .activity-grid {
        grid-template-areas:
            "icon          name          groupmode      completion    actions"
            "icon          visibility    groupmode      completion    actions"
            "icon          dates         groupmode      completion    actions"
            "altcontent    altcontent    altcontent     altcontent    altcontent"
            "afterlink     afterlink     afterlink      afterlink     afterlink"
            "availability  availability  availability   availability  availability";
    }
}

@media (max-width: 767px) {
    .ktvhlesson-course-summary {
        padding: 0.9rem;
    }

    .ktvhlesson-course-summary__top {
        flex-direction: column;
        align-items: stretch;
    }

    .ktvhlesson-course-summary__open {
        width: 100%;
    }

    .ktvhlesson-course-summary__columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .ktvhlesson-aggregate-index__intro {
        text-align: left;
    }

    .ktvhlesson-aggregate-index__tab-button {
        min-height: 100%;
    }

    .ktvhlesson-aggregate-index__panel-header {
        align-items: flex-start;
    }

    .ktvhlesson-aggregate-index__panel-meta {
        margin-left: 0;
        text-align: left;
    }
}

/* ========================================
   Adaptive player redesign
   ======================================== */
.ktvhlesson-player {
    --ktvhlesson-accent: #0c7a7d;
    --ktvhlesson-accent-strong: #0b5e61;
    --ktvhlesson-accent-soft: #e5f7f5;
    --ktvhlesson-ink: #17324d;
    --ktvhlesson-muted: #66768a;
    --ktvhlesson-border: #d8e4ee;
    --ktvhlesson-border-strong: #c6d7e4;
    --ktvhlesson-surface: #ffffff;
    --ktvhlesson-surface-alt: #f7fbfd;
    --ktvhlesson-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    max-width: 1460px;
}

.ktvhlesson-header {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--ktvhlesson-border);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(12, 122, 125, 0.12), transparent 34%),
        linear-gradient(135deg, #fbfdff, #f1f7f9);
    box-shadow: var(--ktvhlesson-shadow);
}

.ktvhlesson-header-main {
    gap: 1rem;
}

.ktvhlesson-header-copy {
    min-width: 0;
}

.ktvhlesson-title {
    color: var(--ktvhlesson-ink);
    font-size: 1.55rem;
    font-weight: 700;
}

.ktvhlesson-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ktvhlesson-header-badges .badge {
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    font-weight: 600;
}

.ktvhlesson-header-tools {
    gap: 0.75rem;
}

.ktvhlesson-authoring-actions {
    flex: 0 0 auto;
}

.ktvhlesson-authoring-menu__toggle {
    min-height: 44px;
    padding: 0.55rem 0.95rem;
    border-color: var(--ktvhlesson-border);
    border-radius: 999px;
    background: #fff;
    color: var(--ktvhlesson-ink);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: none;
}

.ktvhlesson-authoring-menu__toggle:hover,
.ktvhlesson-authoring-menu__toggle:focus,
.show > .ktvhlesson-authoring-menu__toggle.dropdown-toggle {
    border-color: var(--ktvhlesson-accent);
    background: #fff;
    color: var(--ktvhlesson-accent-strong);
    box-shadow: 0 0 0 0.2rem rgba(12, 122, 125, 0.12);
}

.ktvhlesson-authoring-menu__toggle::after {
    margin-left: 0;
}

.ktvhlesson-authoring-menu__toggle-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.ktvhlesson-authoring-menu__toggle .badge {
    min-width: 1.9rem;
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ktvhlesson-accent-strong);
    background: var(--ktvhlesson-accent-soft);
}

.ktvhlesson-authoring-menu__list {
    min-width: 280px;
    margin-top: 0.55rem;
    padding: 0.45rem;
    border: 1px solid var(--ktvhlesson-border);
    border-radius: 18px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
}

.ktvhlesson-authoring-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    white-space: normal;
    color: var(--ktvhlesson-ink);
    font-weight: 600;
}

.ktvhlesson-authoring-menu__item:hover,
.ktvhlesson-authoring-menu__item:focus {
    background: #f5fbfb;
    color: var(--ktvhlesson-accent-strong);
}

.ktvhlesson-authoring-menu__icon {
    width: 1rem;
    flex: 0 0 1rem;
    text-align: center;
    color: var(--ktvhlesson-accent);
}

.ktvhlesson-authoring-menu__text {
    min-width: 0;
}

.ktvhlesson-search-container {
    position: relative;
    width: min(360px, 100%);
}

.ktvhlesson-search-input {
    height: 44px;
    border: 1px solid var(--ktvhlesson-border);
    border-radius: 999px;
    padding: 0.65rem 1rem;
    box-shadow: none;
}

.ktvhlesson-search-input:focus {
    border-color: var(--ktvhlesson-accent);
    box-shadow: 0 0 0 0.2rem rgba(12, 122, 125, 0.12);
}

.ktvhlesson-search-results-container {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    right: 0;
    z-index: 45;
    padding: 0.6rem;
    border: 1px solid var(--ktvhlesson-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
    max-height: 460px;
    overflow: auto;
}

.ktvhlesson-search-results-header {
    padding: 0.15rem 0.25rem 0.65rem;
    border-bottom: 1px solid rgba(198, 215, 228, 0.7);
    margin-bottom: 0.45rem;
}

.ktvhlesson-search-results-count {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--ktvhlesson-muted);
}

.ktvhlesson-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ktvhlesson-search-result {
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: transparent;
    padding: 0.8rem 0.85rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.ktvhlesson-search-result:hover {
    background: #f5fbfb;
    transform: translateY(-1px);
}

.ktvhlesson-search-result-body {
    min-width: 0;
}

.ktvhlesson-search-result-meta {
    margin-bottom: 0.18rem;
    font-size: 0.74rem;
    color: #0f7a58;
    line-height: 1.4;
}

.ktvhlesson-search-result-title {
    color: #1558d6;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
}

.ktvhlesson-search-result-title mark,
.ktvhlesson-search-result-snippet mark {
    background: #fff2b8;
    color: inherit;
    padding: 0;
}

.ktvhlesson-search-result-snippet {
    margin-top: 0.3rem;
    color: var(--ktvhlesson-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.ktvhlesson-search-result-badge {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: #eef3f7;
    color: #516274;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ktvhlesson-search-result-badge.is-ocr {
    background: #e9f3ff;
    color: #1657c6;
}

.ktvhlesson-search-result-badge.is-metadata {
    background: #eef3f7;
    color: #516274;
}

.ktvhlesson-search-empty {
    padding: 1.25rem 0.5rem 1rem;
    text-align: center;
    color: var(--ktvhlesson-muted);
}

.ktvhlesson-search-empty-icon {
    font-size: 1.4rem;
    margin-bottom: 0.45rem;
}

.ktvhlesson-search-loading .spinner-border {
    width: 1rem;
    height: 1rem;
}

.ktvhlesson-workspace {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.25rem;
    align-items: start;
}

.ktvhlesson-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--ktvhlesson-border);
    border-radius: 22px;
    background: var(--ktvhlesson-surface);
    box-shadow: var(--ktvhlesson-shadow);
}

.ktvhlesson-control-copy {
    min-width: 0;
}

.ktvhlesson-page-context-title {
    color: var(--ktvhlesson-ink);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.3;
}

.ktvhlesson-control-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.ktvhlesson-control-actions--compact {
    flex: 0 0 auto;
}

.ktvhlesson-focus-switch .btn,
.ktvhlesson-page-rail-toggle {
    border-radius: 999px;
    font-weight: 600;
}

.ktvhlesson-focus-switch .btn.active,
.ktvhlesson-mobile-quickbar .btn.active {
    color: #fff;
    background: linear-gradient(135deg, var(--ktvhlesson-accent), var(--ktvhlesson-accent-strong));
    border-color: var(--ktvhlesson-accent-strong);
    box-shadow: 0 12px 26px rgba(12, 122, 125, 0.22);
}

.ktvhlesson-page-rail-toggle,
.ktvhlesson-mobile-rail-toggle {
    white-space: nowrap;
}

.ktvhlesson-media-deck {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.ktvhlesson-workspace.ktvhlesson-media-deck.ktvhlesson-has-dual,
.ktvhlesson-workspace.ktvhlesson-media-deck.ktvhlesson-single-document {
    grid-template-columns: minmax(0, 2.4fr) minmax(320px, 0.9fr);
}

.ktvhlesson-workspace.ktvhlesson-media-deck.ktvhlesson-single-video {
    grid-template-columns: minmax(0, 2.4fr) minmax(320px, 0.9fr);
}

.ktvhlesson-media-deck-dual.ktvhlesson-focus-document {
    grid-template-columns: minmax(0, 1.72fr) minmax(300px, 0.88fr);
    grid-template-areas: "document video";
}

.ktvhlesson-media-deck-dual.ktvhlesson-focus-video {
    grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.72fr);
    grid-template-areas: "document video";
}

.ktvhlesson-media-deck:not(.ktvhlesson-media-deck-dual):not(.ktvhlesson-has-dual) {
    grid-template-columns: minmax(0, 1fr);
}

.ktvhlesson-media-deck:not(.ktvhlesson-media-deck-dual):not(.ktvhlesson-has-dual) .ktvhlesson-media-surface-document,
.ktvhlesson-media-deck:not(.ktvhlesson-media-deck-dual):not(.ktvhlesson-has-dual) .ktvhlesson-media-surface-video {
    grid-area: auto;
}

.ktvhlesson-media-surface-document,
.ktvhlesson-media-surface-video {
    min-width: 0;
}

.ktvhlesson-side-stack {
    display: grid;
    gap: 1rem;
    align-content: start;
    min-width: 0;
}

.ktvhlesson-media-surface {
    min-width: 0;
    border: 1px solid var(--ktvhlesson-border);
    border-radius: 24px;
    background: var(--ktvhlesson-surface);
    box-shadow: var(--ktvhlesson-shadow);
    overflow: hidden;
}

.ktvhlesson-surface-body {
    padding: 1rem;
}

.ktvhlesson-surface-body-video {
    padding-top: 1rem;
}

.ktvhlesson-surface-body-document {
    padding: 1.25rem;
}

.ktvhlesson-surface-body .ktvhlesson-image-viewer {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: #f4f6f8;
}

.ktvhlesson-surface-body .ktvhlesson-iv-toolbar {
    background: #f7fafc;
    border-bottom-color: var(--ktvhlesson-border);
}

.ktvhlesson-surface-body .ktvhlesson-video-container {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ktvhlesson-embedded-document-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    height: min(78vh, 860px);
    min-height: min(78vh, 860px);
    max-height: min(78vh, 860px);
    overflow: hidden;
    border: 1px solid rgba(10, 34, 57, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ktvhlesson-embedded-document {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    z-index: 1;
    overflow: auto;
    padding: 1.4rem;
    user-select: none;
    -webkit-user-select: none;
}

.ktvhlesson-media-deck.ktvhlesson-focus-document .ktvhlesson-media-surface-document .ktvhlesson-iv-viewport {
    min-height: 620px;
    max-height: 78vh;
}

.ktvhlesson-media-deck.ktvhlesson-focus-document .ktvhlesson-embedded-document {
    min-height: 100%;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvhlesson-iv-toolbar {
    padding: 0.45rem 0.65rem;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvhlesson-iv-viewport {
    min-height: 280px;
    max-height: 360px;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvhlesson-iv-toolbar .btn {
    min-width: 34px;
    min-height: 34px;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-embedded-document {
    max-height: none;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvhlesson-surface-body-document {
    padding: 0.9rem;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvhlesson-embedded-document-shell {
    height: min(42vh, 420px);
    min-height: min(42vh, 420px);
    max-height: min(42vh, 420px);
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvhlesson-embedded-document {
    padding: 1rem;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvh-opening-doc {
    font-size: 0.9rem;
    line-height: 1.5;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvh-opening-doc__title {
    font-size: 1.14rem;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvh-opening-doc__description {
    font-size: 0.9rem;
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvh-opening-doc__summary-grid,
.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvh-opening-doc__kv-grid,
.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvh-opening-doc__legal-header,
.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvh-opening-doc__legal-footer {
    grid-template-columns: minmax(0, 1fr);
}

.ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvh-opening-doc__table-shell {
    max-height: min(28vh, 260px);
}

.ktvh-opening-doc {
    color: #163042;
    font-size: 0.98rem;
    line-height: 1.65;
}

.ktvh-opening-doc__header {
    margin-bottom: 1.1rem;
}

.ktvh-opening-doc__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ktvh-opening-doc__description {
    margin: 0.45rem 0 0;
    color: #526273;
}

.ktvh-opening-doc__body {
    min-width: 0;
}

.ktvh-opening-doc__kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.ktvh-opening-doc__kv-item {
    border: 1px solid rgba(10, 34, 57, 0.08);
    border-radius: 16px;
    background: #fff;
    padding: 0.95rem 1rem;
}

.ktvh-opening-doc__kv-label,
.ktvh-opening-doc__summary-label {
    color: #5f7080;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ktvh-opening-doc__kv-value,
.ktvh-opening-doc__summary-value {
    margin-top: 0.35rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #102433;
}

.ktvh-opening-doc__summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.ktvh-opening-doc__summary-card {
    border-radius: 16px;
    background: #f2f8fc;
    border: 1px solid rgba(21, 82, 119, 0.08);
    padding: 0.9rem 1rem;
}

.ktvh-opening-doc__table-section + .ktvh-opening-doc__table-section {
    margin-top: 1.25rem;
}

.ktvh-opening-doc__table-section-header {
    margin-bottom: 0.75rem;
}

.ktvh-opening-doc__table-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.ktvh-opening-doc__table-description {
    margin: 0.35rem 0 0;
    color: #526273;
}

.ktvh-opening-doc__notes {
    margin-top: 1rem;
    border-top: 1px solid rgba(10, 34, 57, 0.08);
    padding-top: 1rem;
}

.ktvh-opening-doc__notes h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.ktvh-opening-doc__notes ul {
    margin: 0;
    padding-left: 1.15rem;
}

.ktvh-opening-doc__legal-header,
.ktvh-opening-doc__legal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.ktvh-opening-doc__legal-col {
    text-align: center;
}

.ktvh-opening-doc__legal-col--right {
    text-align: center;
}

.ktvh-opening-doc__legal-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    color: #384b5b;
}

.ktvh-opening-doc__legal-title {
    text-align: center;
    margin-bottom: 1rem;
}

.ktvh-opening-doc__legal-title h2 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
}

.ktvh-opening-doc__legal-title p {
    margin: 0.35rem 0 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.ktvh-opening-doc__legal-issuer {
    margin-top: 0.9rem;
}

.ktvh-opening-doc__legal-preamble p,
.ktvh-opening-doc__legal-section p {
    margin-bottom: 0.75rem;
}

.ktvh-opening-doc__legal-section h3 {
    margin: 1rem 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.ktvh-opening-doc__signature-name {
    margin-top: 3rem;
    font-weight: 700;
}

.ktvh-opening-doc--policy-document {
    color: #121212;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 1.04rem;
    line-height: 1.85;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-title h2 {
    font-size: 1.95rem;
    letter-spacing: 0.015em;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-title p {
    font-size: 1.18rem;
    font-style: italic;
    font-weight: 500;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-header,
.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-footer {
    gap: 2rem;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-meta {
    align-items: flex-end;
    color: #202020;
    font-size: 1rem;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section {
    margin-top: 0.45rem;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section-title {
    margin: 1rem 0 0.5rem;
    color: #111;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section-title--chapter,
.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section-title--major,
.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section-title--item {
    text-align: center;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section-title--chapter {
    margin-top: 1.8rem;
    font-size: 1.28rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section-title--major {
    font-size: 1.34rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section-title--item {
    font-size: 1.14rem;
    font-weight: 700;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section-title--article {
    font-size: 1.14rem;
    font-weight: 700;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section-title--signature {
    margin-top: 1.75rem;
    text-align: right;
    font-size: 1.12rem;
    text-transform: uppercase;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-paragraph {
    margin: 0.42rem 0;
    text-align: justify;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-paragraph--subheading,
.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-paragraph--label {
    margin-top: 0.85rem;
    padding-left: 1.75rem;
    font-weight: 700;
    text-align: left;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-paragraph--bullet,
.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-paragraph--numbered {
    padding-left: 1.75rem;
    text-indent: 0;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section--table {
    margin-top: 1rem;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__legal-section--table .ktvh-opening-doc__table-shell {
    border-radius: 0;
    border: 1px solid rgba(17, 17, 17, 0.35);
    box-shadow: none;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__table--policy {
    width: 100%;
    min-width: 100%;
    font-size: 1rem;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__table--policy thead th {
    position: static;
    background: #fff;
    color: #101010;
    font-weight: 700;
    border-bottom-color: rgba(17, 17, 17, 0.45);
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__table--policy td,
.ktvh-opening-doc--policy-document .ktvh-opening-doc__table--policy th {
    padding: 0.7rem 0.75rem;
    border-color: rgba(17, 17, 17, 0.45);
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__table--pair tbody tr:nth-child(even) td,
.ktvh-opening-doc--policy-document .ktvh-opening-doc__table--grouped tbody tr:nth-child(even):not(.ktvh-opening-doc__row--group) td {
    background: #fafafa;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__table--grouped thead th {
    vertical-align: middle;
    text-align: center;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__row--group th {
    background: #f3e9d7;
    color: #7a5a1a;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.02em;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__row--sub td {
    border-top-style: dashed;
}

.ktvh-opening-doc--policy-document .ktvh-opening-doc__cell--indent {
    padding-left: 1.75rem;
}

.ktvh-opening-doc__table {
    margin-bottom: 0;
    background: #fff;
    width: max-content;
    min-width: 100%;
}

.ktvh-opening-doc__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #ecf4fb;
    border-bottom-color: rgba(16, 36, 51, 0.14);
    white-space: nowrap;
}

.ktvh-opening-doc__table td,
.ktvh-opening-doc__table th {
    vertical-align: top;
}

.ktvh-opening-doc__table-shell {
    max-width: 100%;
    max-height: min(58vh, 720px);
    overflow: auto;
    border-radius: 16px;
    border: 1px solid rgba(10, 34, 57, 0.08);
}

.ktvh-opening-doc__cell--right {
    text-align: right;
    white-space: nowrap;
}

.ktvh-opening-doc__cell--center {
    text-align: center;
}

@media (max-width: 767px) {
    .ktvhlesson-embedded-document-shell {
        display: block;
        height: auto;
        min-height: auto;
        max-height: none;
    }

    .ktvhlesson-embedded-document {
        min-height: auto;
        padding: 1rem;
    }

    .ktvh-opening-doc__legal-header,
    .ktvh-opening-doc__legal-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .ktvh-opening-doc__title,
    .ktvh-opening-doc__legal-title h2 {
        font-size: 1.25rem;
    }
}

.ktvhlesson-support-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.ktvhlesson-support-card {
    grid-column: span 6;
    min-width: 0;
    border: 1px solid var(--ktvhlesson-border);
    border-radius: 22px;
    background: var(--ktvhlesson-surface);
    box-shadow: var(--ktvhlesson-shadow);
    overflow: hidden;
}

.ktvhlesson-support-card-videos {
    grid-column: 1 / -1;
}

.ktvhlesson-support-card-videos .ktvhlesson-related-videos {
    padding: 1rem 1.2rem;
}

.ktvhlesson-support-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #eef3f8;
    background: linear-gradient(180deg, #fff, #f8fbfd);
}

.ktvhlesson-support-card .list-group-item {
    padding: 0.9rem 1rem;
    border-color: #edf2f7;
}

.ktvhlesson-ai-section .card,
.ktvhlesson-ai-section .ktvhlesson-ai-chat,
.ktvhlesson-ai-section > * {
    border-radius: 22px;
}

@media (max-width: 991.98px) {
    .ktvhlesson-ai-launcher {
        right: 12px;
        bottom: 108px;
    }

    .ktvhlesson-ai-launcher-panel {
        width: min(420px, calc(100vw - 24px));
        max-height: min(72vh, 680px);
    }

    .ktvhlesson-ai-launcher-toggle {
        width: 52px;
        height: 52px;
    }
}

.ktvhlesson-page-rail {
    position: sticky;
    top: 1rem;
    min-width: 0;
    align-self: start;
}

.ktvhlesson-page-rail .ktvhlesson-page-sidebar {
    position: relative;
}

.ktvhlesson-page-rail .card {
    border: 1px solid var(--ktvhlesson-border);
    border-radius: 24px;
    box-shadow: var(--ktvhlesson-shadow);
    overflow: hidden;
}

.ktvhlesson-ps-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ktvhlesson-ps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #edf2f7;
    background: linear-gradient(180deg, #fff, #f8fbfd);
}

.ktvhlesson-ps-header-copy {
    min-width: 0;
}

.ktvhlesson-ps-header-title {
    color: var(--ktvhlesson-ink);
    font-size: 1rem;
    font-weight: 700;
}

.ktvhlesson-ps-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.ktvhlesson-ps-header-count {
    min-width: 2rem;
    padding: 0.38rem 0.55rem;
    border-radius: 999px;
    background: var(--ktvhlesson-accent-soft);
    color: var(--ktvhlesson-accent-strong);
    font-weight: 700;
}

.ktvhlesson-ps-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: 999px;
    border-color: var(--ktvhlesson-border);
    color: var(--ktvhlesson-ink);
    box-shadow: none;
}

.ktvhlesson-ps-close:hover,
.ktvhlesson-ps-close:focus {
    color: var(--ktvhlesson-accent-strong);
    border-color: var(--ktvhlesson-accent);
    box-shadow: 0 0 0 0.2rem rgba(12, 122, 125, 0.12);
}

.ktvhlesson-page-rail .card-body {
    background: #fbfdff;
}

.ktvhlesson-page-rail .ktvhlesson-ps-search {
    border-radius: 14px;
    border-color: var(--ktvhlesson-border);
}

.ktvhlesson-page-rail .input-group {
    margin-bottom: 0 !important;
}

.ktvhlesson-page-list {
    max-height: min(70vh, 760px);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ktvhlesson-page-list .list-group-item {
    padding: 0.9rem 1rem;
    border-left-width: 4px;
}

.ktvhlesson-page-list .list-group-item.active {
    border-left-color: var(--ktvhlesson-accent);
    background-color: var(--ktvhlesson-accent-soft);
    color: var(--ktvhlesson-ink);
}

.ktvhlesson-page-list .list-group-item:hover:not(.active) {
    border-left-color: rgba(12, 122, 125, 0.2);
    background-color: #f7fbfd;
}

.ktvhlesson-ps-item-title {
    color: var(--ktvhlesson-ink);
    font-size: 0.92rem;
    font-weight: 600;
}

.ktvhlesson-ps-item-code {
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    background: #f2f6fa;
}

.ktvhlesson-page-rail-backdrop {
    display: none;
}

.ktvhlesson-mobile-quickbar {
    display: none;
}

.ktvhlesson-empty-state {
    border: 1px dashed var(--ktvhlesson-border-strong);
    border-radius: 22px;
    background: linear-gradient(180deg, #fcfdff, #f5f9fb);
}

.ktvhlesson-rv-header h5,
.ktvhlesson-support-card-header h5 {
    color: var(--ktvhlesson-ink);
    font-weight: 700;
}

.ktvhlesson-rv-item {
    border: 1px solid #edf2f7;
    border-radius: 18px;
}

.ktvhlesson-rv-item .card-body {
    padding: 0.8rem;
}

@media (min-width: 992px) {
    .ktvhlesson-player.ktvhlesson-page-rail-closed .ktvhlesson-page-rail {
        display: none;
    }

    .ktvhlesson-player.ktvhlesson-page-rail-closed .ktvhlesson-workspace.ktvhlesson-media-deck {
        grid-template-columns: minmax(0, 1fr);
    }

    .ktvhlesson-player.ktvhlesson-page-rail-closed .ktvhlesson-workspace.ktvhlesson-media-deck .ktvhlesson-side-stack {
        display: none;
    }

    .ktvhlesson-side-stack .ktvhlesson-media-surface-document .ktvhlesson-surface-body-document {
        padding: 0.9rem;
    }

    .ktvhlesson-side-stack .ktvhlesson-media-surface-document .ktvhlesson-embedded-document-shell {
        height: min(42vh, 420px);
        min-height: min(42vh, 420px);
        max-height: min(42vh, 420px);
    }

    .ktvhlesson-side-stack .ktvhlesson-media-surface-document .ktvhlesson-embedded-document {
        padding: 1rem;
    }

    .ktvhlesson-side-stack .ktvh-opening-doc {
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .ktvhlesson-side-stack .ktvh-opening-doc__title {
        font-size: 1.12rem;
    }

    .ktvhlesson-side-stack .ktvh-opening-doc__description {
        font-size: 0.9rem;
    }

    .ktvhlesson-side-stack .ktvh-opening-doc__summary-grid,
    .ktvhlesson-side-stack .ktvh-opening-doc__kv-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ktvhlesson-side-stack .ktvh-opening-doc__table-shell {
        max-height: min(26vh, 250px);
    }
}

@media (max-width: 1199px) {
    .ktvhlesson-workspace {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .ktvhlesson-media-deck.ktvhlesson-focus-document .ktvhlesson-media-surface-document .ktvhlesson-iv-viewport {
        min-height: 520px;
    }
}

@media (max-width: 991px) {
    .ktvhlesson-player-body {
        padding-bottom: 6rem;
    }

    .ktvhlesson-onboarding-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .ktvhlesson-header {
        padding: 1rem;
    }

    .ktvhlesson-title {
        font-size: 1.25rem;
    }

    .ktvhlesson-header-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .ktvhlesson-header-tools {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .ktvhlesson-authoring-actions,
    .ktvhlesson-authoring-menu,
    .ktvhlesson-authoring-menu__toggle {
        width: 100%;
    }

    .ktvhlesson-authoring-menu__toggle {
        justify-content: space-between;
    }

    .ktvhlesson-authoring-menu__list {
        min-width: 0;
        width: 100%;
    }

    .ktvhlesson-search-container {
        width: 100%;
    }

    .ktvhlesson-search-input,
    .ktvhlesson-authoring-menu__toggle,
    .ktvhlesson-page-rail-toggle {
        min-height: 46px;
    }

    .ktvhlesson-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .ktvhlesson-control-bar {
        position: sticky;
        top: 0.5rem;
        z-index: 15;
        padding: 0.9rem 1rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .ktvhlesson-control-copy {
        min-width: 0;
    }

    .ktvhlesson-control-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        justify-content: stretch;
    }

    .ktvhlesson-control-actions--split {
        width: 100%;
        grid-column: 1 / -1;
    }

    .ktvhlesson-control-actions--compact {
        width: auto;
        display: flex;
        justify-content: flex-end;
        justify-self: end;
    }

    .ktvhlesson-focus-switch {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .ktvhlesson-focus-switch .btn {
        width: 100%;
    }

    .ktvhlesson-page-rail-toggle {
        width: auto;
        min-width: 150px;
    }

    .ktvhlesson-workspace.ktvhlesson-media-deck {
        display: block;
    }

    .ktvhlesson-workspace.ktvhlesson-media-deck > .ktvhlesson-media-surface {
        width: 100%;
        margin-bottom: 1rem;
    }

    .ktvhlesson-workspace.ktvhlesson-media-deck .ktvhlesson-side-stack .ktvhlesson-media-surface {
        display: none;
    }

    .ktvhlesson-media-deck.ktvhlesson-focus-document .ktvhlesson-media-surface-document .ktvhlesson-iv-viewport {
        min-height: 380px;
        max-height: 62vh;
    }

    .ktvhlesson-media-deck.ktvhlesson-focus-video .ktvhlesson-media-surface-document .ktvhlesson-iv-viewport {
        min-height: 230px;
        max-height: 320px;
    }

    .ktvhlesson-support-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ktvhlesson-support-card,
    .ktvhlesson-support-card-videos {
        grid-column: auto;
    }

    .ktvhlesson-page-rail {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(92vw, 420px);
        padding: 0.75rem 0 0.75rem 0.75rem;
        background: rgba(246, 250, 252, 0.94);
        transform: translateX(110%);
        transition: transform 0.22s ease;
        box-shadow: -28px 0 60px rgba(15, 23, 42, 0.18);
        z-index: 60;
        overflow: hidden;
    }

    .ktvhlesson-player.ktvhlesson-page-rail-open .ktvhlesson-page-rail {
        display: flex;
        transform: translateX(0);
    }

    .ktvhlesson-page-rail .ktvhlesson-page-sidebar {
        width: 100%;
        height: 100%;
    }

    .ktvhlesson-page-rail .card {
        height: 100%;
        min-height: 0;
        border-radius: 24px 0 0 24px;
    }

    .ktvhlesson-page-rail .card-body {
        flex: 0 0 auto;
    }

    .ktvhlesson-page-rail .ktvhlesson-page-list {
        max-height: none;
    }

    .ktvhlesson-ps-close {
        display: inline-flex;
    }

    .ktvhlesson-page-rail-backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(15, 23, 42, 0.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .ktvhlesson-player.ktvhlesson-page-rail-open .ktvhlesson-page-rail-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .ktvhlesson-mobile-quickbar {
        display: none;
    }
}

@media (max-width: 575px) {
    .ai-chat-header,
    .ai-chat-meta,
    .ai-chat-messages,
    .ai-chat-input-area {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .ai-chat-title {
        font-size: 1rem;
    }

    .ai-chat-title .fa {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .ai-chat-subtitle {
        font-size: 0.9rem;
    }

    .ai-chat-welcome-card {
        padding: 0.9rem 0.95rem;
    }

    .ai-chat-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .ai-chat-actions .btn-link {
        flex: 0 0 auto;
        text-align: center;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .ai-chat-origin-badge {
        max-width: 100%;
    }

    .ktvhlesson-header,
    .ktvhlesson-control-bar,
    .ktvhlesson-support-card-header,
    .ktvhlesson-support-card-videos .ktvhlesson-related-videos {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .ktvhlesson-control-actions {
        gap: 0.5rem;
    }

    .ktvhlesson-surface-body,
    .ktvhlesson-surface-body-video {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .ktvhlesson-media-deck.ktvhlesson-focus-document .ktvhlesson-media-surface-document .ktvhlesson-iv-viewport {
        min-height: 300px;
    }

    .ktvhlesson-header-tools {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ktvhlesson-control-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
    }

    .ktvhlesson-control-actions--compact .ktvhlesson-page-rail-toggle {
        min-width: 0;
        width: 100%;
    }

    .ktvhlesson-mobile-quickbar {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
    }
}

body.ktvhlesson-page-rail-open {
    overflow: hidden;
}