/* study-content.css -- PDF/document viewer, content reader */


        /* Content view */
        .content-view { padding: 20px; }
        .content-reader-shell {
            border: 1px solid var(--study-border);
            border-radius: 16px;
            background: var(--study-bg-secondary);
            overflow: hidden;
            margin-bottom: 12px;
        }
        .content-reader-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 14px;
            border-bottom: 1px solid var(--study-border);
            background: var(--study-bg-tertiary);
        }
        .content-reader-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--study-text-secondary); }
        .content-reader-sub { font-size: 12px; color: var(--study-text-tertiary); }
        .raw-transcript-body { max-height: 2000px; }
        .raw-transcript-body.collapsed { max-height: 0; }
        .content-inline-btn {
            height: 30px;
            border-radius: 999px;
            border: 1px solid var(--study-border);
            background: var(--study-bg-secondary);
            color: var(--study-text-secondary);
            padding: 0 12px;
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            transition: all .15s;
        }
        .content-inline-btn:hover { color: var(--study-text); background: var(--study-bg); }
        .content-inline-btn i { width: 13px; height: 13px; }
        .content-file-info { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 10px; margin-bottom: 16px; }
        .content-file-info i { width: 20px; height: 20px; color: var(--study-accent); }
        .content-file-name { font-size: 14px; font-weight: 500; }
        .content-file-type { font-size: 11px; color: var(--study-text-tertiary); }
        /* PDF Viewer, custom toolbar like Studley */
        .pdf-viewer-wrap { display: flex; flex-direction: column; height: 100%; }
        .pdf-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--study-bg-secondary); border-bottom: 1px solid var(--study-border); flex-shrink: 0; }
        .pdf-toolbar button, .pdf-toolbar a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--study-text-secondary); cursor: pointer; border-radius: 6px; text-decoration: none; }
        .pdf-toolbar button:hover, .pdf-toolbar a:hover { background: var(--study-bg-tertiary); color: var(--study-text); }
        .pdf-toolbar i { width: 16px; height: 16px; }
        .pdf-page-info { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--study-text-secondary); }
        #pdfPageInput { width: 38px; text-align: center; background: var(--study-bg-tertiary); border: 1px solid var(--study-border); border-radius: 4px; color: var(--study-text); font-size: 13px; padding: 2px 4px; -moz-appearance: textfield; }
        #pdfPageInput::-webkit-outer-spin-button, #pdfPageInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .pdf-zoom-info { font-size: 13px; color: var(--study-text-secondary); min-width: 42px; text-align: center; }
        .pdf-canvas-area { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 16px; gap: 8px; background: var(--study-bg); }
        .pdf-canvas-area.dark-mode { background: #1a1a1a; }
        .pdf-canvas-area canvas { box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
        #rPdfPageInput { width: 38px; text-align: center; background: var(--study-bg-tertiary); border: 1px solid var(--study-border); border-radius: 4px; color: var(--study-text); font-size: 13px; padding: 2px 4px; -moz-appearance: textfield; }
        #rPdfPageInput::-webkit-outer-spin-button, #rPdfPageInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .pdf-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--study-text-secondary); font-size: 14px; gap: 8px; }
        .pdf-loading .spinner { width: 20px; height: 20px; border: 2px solid var(--study-border); border-top-color: var(--study-accent); border-radius: 50%; animation: spin 1s linear infinite; }
        .pdf-switcher { display: flex; gap: 4px; padding: 6px 12px; background: var(--study-bg-secondary); border-bottom: 1px solid var(--study-border); flex-shrink: 0; overflow-x: auto; }
        .pdf-switcher-tab { padding: 5px 14px; border-radius: 8px; border: 1px solid var(--study-border); background: transparent; color: var(--study-text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
        .pdf-switcher-tab:hover { background: var(--study-bg-tertiary); color: var(--study-text); }
        .pdf-switcher-tab.active { background: var(--study-accent-dim); color: var(--study-accent); border-color: var(--study-accent); }

        /* ═══ Study set generating, hero & ribbon ═══ */
        .study-gen-hero {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px 20px;
            min-height: 100%;
            width: 100%;
            box-sizing: border-box;
            -webkit-animation: khio-gen-hero-in 0.4s cubic-bezier(0.33, 1, 0.68, 1);
            animation: khio-gen-hero-in 0.4s cubic-bezier(0.33, 1, 0.68, 1);
        }
        @-webkit-keyframes khio-gen-hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes khio-gen-hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        .study-gen-hero-card {
            position: relative;
            width: min(560px, 100%);
            text-align: center;
            background: linear-gradient(180deg,
                var(--study-bg-secondary),
                color-mix(in srgb, var(--study-bg-secondary) 92%, var(--study-accent) 8%));
            border: 1px solid color-mix(in srgb, var(--study-accent) 18%, var(--study-border));
            border-radius: 22px;
            padding: 40px 28px 32px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18),
                        0 4px 12px rgba(0, 0, 0, 0.08),
                        0 0 0 1px color-mix(in srgb, var(--study-accent) 6%, transparent) inset;
            overflow: hidden;
        }
        .study-gen-hero-card::before {
            content: '';
            position: absolute;
            inset: -50%;
            background: radial-gradient(circle at 50% 15%,
                color-mix(in srgb, var(--study-accent) 22%, transparent),
                transparent 55%);
            pointer-events: none;
            -webkit-animation: khio-gen-glow 4.8s ease-in-out infinite;
            animation: khio-gen-glow 4.8s ease-in-out infinite;
        }
        @-webkit-keyframes khio-gen-glow {
            0%, 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.65; }
            50%      { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1; }
        }
        @keyframes khio-gen-glow {
            0%, 100% { transform: scale(1); opacity: 0.65; }
            50%      { transform: scale(1.1); opacity: 1; }
        }
        .study-gen-hero-card > * { position: relative; }
        .study-gen-hero-spin {
            margin: 0 auto 20px;
            display: flex;
            justify-content: center;
        }
        .study-gen-hero-spin .khio-loader {
            filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--study-accent) 32%, transparent));
        }
        .study-gen-hero-title {
            font-size: 22px;
            font-weight: 800;
            margin: 0 0 8px;
            letter-spacing: -0.01em;
            background: linear-gradient(90deg,
                var(--study-text),
                color-mix(in srgb, var(--study-accent) 70%, var(--study-text)));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }
        .study-gen-hero-stage {
            font-size: 14px;
            color: var(--study-text-secondary);
            margin: 0 auto 22px;
            min-height: 20px;
            max-width: 420px;
            line-height: 1.5;
            -webkit-animation: khio-loader-fade 2.4s ease-in-out infinite;
            animation: khio-loader-fade 2.4s ease-in-out infinite;
        }
        .study-gen-hero-bar {
            position: relative;
            height: 8px;
            width: 100%;
            border-radius: 999px;
            overflow: hidden;
            background: color-mix(in srgb, var(--study-border) 85%, transparent);
            margin: 0 auto 22px;
        }
        .study-gen-hero-bar::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 40%;
            border-radius: inherit;
            background: linear-gradient(90deg,
                transparent,
                color-mix(in srgb, var(--study-accent) 55%, #fff),
                var(--study-accent),
                color-mix(in srgb, var(--study-accent) 55%, #fff),
                transparent);
            -webkit-animation: khio-gen-sweep 1.8s cubic-bezier(0.4, 0.2, 0.3, 1) infinite;
            animation: khio-gen-sweep 1.8s cubic-bezier(0.4, 0.2, 0.3, 1) infinite;
        }
        @-webkit-keyframes khio-gen-sweep {
            0%   { -webkit-transform: translateX(-120%); transform: translateX(-120%); }
            100% { -webkit-transform: translateX(320%); transform: translateX(320%); }
        }
        @keyframes khio-gen-sweep {
            0%   { transform: translateX(-120%); }
            100% { transform: translateX(320%); }
        }
        .study-gen-hero-steps {
            list-style: none;
            margin: 0 auto 20px;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px 18px;
            text-align: left;
            max-width: 420px;
        }
        .study-gen-hero-steps li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--study-text-tertiary);
            transition: color 0.3s ease;
        }
        .study-gen-hero-steps li i {
            width: 16px;
            height: 16px;
            color: var(--study-text-tertiary);
            transition: color 0.3s ease, transform 0.3s ease;
            flex-shrink: 0;
        }
        .study-gen-hero-steps li.active {
            color: var(--study-text);
            font-weight: 600;
        }
        .study-gen-hero-steps li.active i {
            color: var(--study-accent);
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        .study-gen-hero-steps li.done { color: var(--study-text-secondary); }
        .study-gen-hero-steps li.done i { color: var(--study-green, #22c55e); }
        .study-gen-hero-tip {
            font-size: 12px;
            color: var(--study-text-tertiary);
            margin: 0;
            line-height: 1.6;
            max-width: 380px;
            margin-left: auto;
            margin-right: auto;
        }
        .study-gen-hero-error {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px 4px;
            color: var(--study-red, #ef4444);
            text-align: center;
        }
        .study-gen-hero-error i { width: 24px; height: 24px; }
        .study-gen-hero-error strong { font-size: 16px; color: var(--study-text); }
        .study-gen-hero-error span { font-size: 13px; color: var(--study-text-secondary); line-height: 1.5; }

        /* Standalone generation-failure banner, replaces whatever generation
           UI was showing (hero card OR thin ribbon) with a clearly readable
           error block so the user can actually see WHY it failed. */
        .study-gen-failed-wrap {
            display: block;
            width: 100%;
            padding: 0;
            margin: 0;
            background: none;
            border: none;
            box-shadow: none;
            box-sizing: border-box;
        }
        .study-gen-failed-wrap::before { content: none; }
        .study-gen-failed {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            width: 100%;
            max-width: 640px;
            margin: 16px auto;
            padding: 16px 20px;
            background: color-mix(in srgb, var(--study-red, #ef4444) 8%, var(--study-bg-secondary));
            border: 1px solid color-mix(in srgb, var(--study-red, #ef4444) 38%, var(--study-border));
            border-left: 4px solid var(--study-red, #ef4444);
            border-radius: 12px;
            box-shadow: 0 4px 14px rgba(239, 68, 68, 0.08);
            box-sizing: border-box;
        }
        .study-gen-failed-head {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--study-red, #ef4444);
            font-size: 15px;
            font-weight: 700;
        }
        .study-gen-failed-head i { width: 20px; height: 20px; flex-shrink: 0; }
        .study-gen-failed-msg {
            font-size: 14px;
            line-height: 1.5;
            color: var(--study-text);
            word-break: break-word;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
        }
        .study-gen-failed-actions {
            display: flex;
            gap: 10px;
            margin-top: 4px;
            flex-wrap: wrap;
        }
        .study-gen-failed-cta {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: var(--study-accent, #e8853a);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: filter .15s;
        }
        .study-gen-failed-cta:hover { filter: brightness(1.08); }
        .study-gen-failed-cta.secondary {
            background: transparent;
            color: var(--study-text-secondary);
            border: 1px solid var(--study-border);
        }
        .study-gen-failed-cta.secondary:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        @media (max-width: 560px) {
            .study-gen-failed { padding: 14px 16px; margin: 12px auto; }
            .study-gen-failed-head { font-size: 14px; }
            .study-gen-failed-msg { font-size: 13px; }
        }

        /* Compact ribbon, used when content is already partially ready (PDF rendered, still generating more) */
        .study-gen-ribbon {
            /* flex-shrink:0 + padding-block preserves the banner's height
               even when a sibling (.pdf-viewer-wrap has height:100%) tries
               to take all the vertical space. Without it the ribbon got
               visually compressed down to ~20px tall, clipping the text. */
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            margin: 0 0 12px;
            border-radius: 12px;
            background: linear-gradient(90deg,
                color-mix(in srgb, var(--study-accent) 12%, var(--study-bg-secondary)),
                var(--study-bg-secondary));
            border: 1px solid color-mix(in srgb, var(--study-accent) 28%, var(--study-border));
            position: relative;
            overflow: hidden;
        }
        .study-gen-ribbon::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                transparent,
                color-mix(in srgb, var(--study-accent) 22%, transparent),
                transparent);
            -webkit-animation: khio-gen-sweep 2.6s linear infinite;
            animation: khio-gen-sweep 2.6s linear infinite;
            pointer-events: none;
        }
        .study-gen-ribbon > * { position: relative; }
        .study-gen-ribbon .khio-loader {
            width: 22px;
            height: 22px;
            flex-shrink: 0;
        }
        .study-gen-ribbon .khio-loader::before,
        .study-gen-ribbon .khio-loader::after { border-width: 2px; }
        .study-gen-ribbon .khio-loader::after { inset: 4px; }
        .study-gen-ribbon-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .study-gen-ribbon-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--study-text);
        }
        .study-gen-ribbon-text {
            /* Drop the single-line ellipsis so long stage messages like
               "Reading Unit 11 - Data Visualization.pptx" wrap onto a
               second line instead of being cut off mid-word. Still cap
               at 2 lines to keep the ribbon compact. */
            font-size: 12px;
            color: var(--study-text-secondary);
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        /* Progress bar under the text. Width animates from 0% → 100% as the
           server reports pct. Kept thin + same-colour family so it reads as
           part of the ribbon rather than a separate UI element. */
        .study-gen-ribbon-progress {
            margin-top: 6px;
            height: 4px;
            width: 100%;
            background: color-mix(in srgb, var(--study-accent) 12%, transparent);
            border-radius: 999px;
            overflow: hidden;
        }
        .study-gen-ribbon-progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg,
                color-mix(in srgb, var(--study-accent) 80%, #fff 20%),
                var(--study-accent));
            border-radius: 999px;
            transition: width 0.45s cubic-bezier(.4, 0, .2, 1);
        }

        /* Mobile tune-up */
        @media (max-width: 600px) {
            .study-gen-hero { padding: 20px 14px; }
            .study-gen-hero-card { padding: 32px 20px 26px; border-radius: 18px; }
            .study-gen-hero-title { font-size: 19px; }
            .study-gen-hero-stage { font-size: 13px; }
            .study-gen-hero-steps { grid-template-columns: 1fr; gap: 8px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .study-gen-hero,
            .study-gen-hero-card::before,
            .study-gen-hero-stage,
            .study-gen-hero-bar::after,
            .study-gen-ribbon::before {
                -webkit-animation: none !important;
                animation: none !important;
            }
        }