lami
/
lami-base-v1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610
							<!DOCTYPE html>
<html lang="zh-CN" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>AI销售培训系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#16a34a',
                        'primary-dark': '#15803d',
                        'primary-light': '#dcfce7',
                    },
                    fontSize: {
                        'base': '17px',
                    },
                    spacing: {
                        'safe-top': 'env(safe-area-inset-top)',
                        'safe-bottom': 'env(safe-area-inset-bottom)',
                    }
                }
            }
        }
    </script>
    <style>
        * {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            outline: none !important;
            box-shadow: none !important;
        }
        *:focus {
            outline: none !important;
            box-shadow: none !important;
        }
        *:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            font-size: 17px;
            line-height: 1.5;
            overscroll-behavior: none;
        }
        .safe-top {
            padding-top: max(12px, env(safe-area-inset-top));
        }
        .safe-bottom {
            padding-bottom: max(8px, env(safe-area-inset-bottom));
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .tab-item.active {
            color: #16a34a;
        }
        .tab-item.active i {
            color: #16a34a;
        }
        /* Sheet动画 */
        .sheet {
            transform: translateY(100%);
            transition: transform 0.3s ease-out;
        }
        .sheet.open {
            transform: translateY(0);
        }
        .sheet-overlay {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .sheet-overlay.open {
            opacity: 1;
            visibility: visible;
        }
        /* 防止模态框打开时外层滚动 */
        .modal-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        /* 模态框滚动容器样式 */
        .modal-scrollable {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        /* 思考动画 */
        @keyframes bounce {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-6px); }
        }
        .thinking-dot {
            animation: bounce 1.4s infinite ease-in-out both;
        }
        .thinking-dot:nth-child(1) { animation-delay: -0.32s; }
        .thinking-dot:nth-child(2) { animation-delay: -0.16s; }
        /* 雷达图 */
        .radar-chart {
            width: 200px;
            height: 200px;
        }
        /* 进度条动画 */
        @keyframes progress {
            from { width: 0; }
        }
        .progress-animate {
            animation: progress 1s ease-out forwards;
        }
        /* 下拉刷新 */
        .pull-refresh {
            transition: transform 0.3s;
        }
        .pull-refresh.pulling {
            transform: translateY(60px);
        }
        /* 视频播放器模拟 */
        .video-player {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        }
        /* 评分条 */
        .score-bar {
            transition: width 0.8s ease-out;
        }
        /* 隐藏滚动条 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        /* 问答页面增强样式 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        .animate-fadeIn {
            animation: fadeIn 0.4s ease-out forwards;
        }
        .animate-slideUp {
            animation: slideUp 0.5s ease-out forwards;
        }
        .animate-pulse {
            animation: pulse 2s ease-in-out infinite;
        }
        
        /* 问答页面消息气泡样式 */
        .qa-message-enter {
            animation: slideUp 0.3s ease-out forwards;
        }
        
        /* 打字机光标效果 */
        .typing-cursor::after {
            content: '|';
            animation: blink 1s step-end infinite;
        }
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        
        /* 按钮点击涟漪效果 */
        .ripple {
            position: relative;
            overflow: hidden;
        }
        .ripple::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10);
            opacity: 0;
            transition: transform 0.5s, opacity 1s;
        }
        .ripple:active::after {
            transform: scale(0);
            opacity: 0.3;
            transition: 0s;
        }
        
        /* 渐变文字效果 */
        .gradient-text {
            background: linear-gradient(135deg, #00d68f, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* 玻璃态效果 */
        .glass {
            background: rgba(26, 31, 46, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        
        /* 悬浮提示 */
        .tooltip {
            position: relative;
        }
        .tooltip::before {
            content: attr(data-tip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            padding: 6px 12px;
            background: #1a1f2e;
            color: white;
            font-size: 12px;
            border-radius: 6px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s;
            pointer-events: none;
        }
        .tooltip:hover::before {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-4px);
        }
        
        /* 侧边栏滑入动画 */
        #qa-sidebar.slide-in {
            transform: translateX(0) !important;
        }
        
        /* 遮罩层渐变 */
        #sidebar-overlay {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        /* 输入框聚焦效果 */
        #qa-input:focus {
            box-shadow: 0 0 0 2px rgba(0, 214, 143, 0.3);
        }
        
        /* 发送按钮悬浮增强 */
        #qa-send-btn:hover {
            transform: scale(1.05);
        }
        
        /* 聊天消息悬浮效果 */
        .message-bubble {
            transition: transform 0.2s ease;
        }
        .message-bubble:hover {
            transform: scale(1.01);
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <!-- 主内容区 -->
    <main class="pb-20">
        <!-- ==================== 首页Tab ==================== -->
        <div id="tab-home" class="tab-content active">
            <!-- 欢迎卡片 -->
            <div class="px-4 pt-4 pb-6">
                <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-5 text-white shadow-lg">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                                <i class="fas fa-user text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm opacity-90">欢迎回来</p>
                                <p class="font-semibold text-lg">张小明</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-xs opacity-80">当前等级</p>
                            <p class="font-bold text-xl">金牌销售</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-4 text-center">
                        <div class="bg-white/10 rounded-xl p-3">
                            <p class="text-2xl font-bold">12</p>
                            <p class="text-xs opacity-80">已完成课程</p>
                        </div>
                        <div class="bg-white/10 rounded-xl p-3">
                            <p class="text-2xl font-bold">85%</p>
                            <p class="text-xs opacity-80">平均得分</p>
                        </div>
                        <div class="bg-white/10 rounded-xl p-3">
                            <p class="text-2xl font-bold">3</p>
                            <p class="text-xs opacity-80">今日任务</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快捷入口 -->
            <div class="px-4 mb-6">
                <div class="grid grid-cols-4 gap-3">
                    <div class="flex flex-col items-center gap-2" onclick="switchTab('learning')">
                        <div class="w-14 h-14 bg-green-50 dark:bg-green-900/30 rounded-2xl flex items-center justify-center">
                            <i class="fas fa-book-open text-green-600 dark:text-green-400 text-xl"></i>
                        </div>
                        <span class="text-sm">课程学习</span>
                    </div>
                    <div class="flex flex-col items-center gap-2" onclick="switchTab('practice')">
                        <div class="w-14 h-14 bg-blue-50 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center">
                            <i class="fas fa-robot text-blue-600 dark:text-blue-400 text-xl"></i>
                        </div>
                        <span class="text-sm">AI陪练</span>
                    </div>
                    <div class="flex flex-col items-center gap-2" onclick="switchTab('score')">
                        <div class="w-14 h-14 bg-purple-50 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center">
                            <i class="fas fa-chart-line text-purple-600 dark:text-purple-400 text-xl"></i>
                        </div>
                        <span class="text-sm">成绩分析</span>
                    </div>
                    <div class="flex flex-col items-center gap-2" onclick="switchTab('profile')">
                        <div class="w-14 h-14 bg-orange-50 dark:bg-orange-900/30 rounded-2xl flex items-center justify-center">
                            <i class="fas fa-trophy text-orange-600 dark:text-orange-400 text-xl"></i>
                        </div>
                        <span class="text-sm">排行榜</span>
                    </div>
                </div>
            </div>

            <!-- 今日学习任务 -->
            <div class="px-4 mb-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-semibold text-lg">今日学习任务</h3>
                    <span class="text-sm text-green-600">查看全部</span>
                </div>
                <div class="space-y-3">
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700" onclick="openCourseDetail('course1')">
                        <div class="flex gap-3">
                            <div class="w-20 h-14 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-play text-white"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium mb-1">产品卖点提炼技巧</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400">已学习 60%</p>
                                <div class="mt-2 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                                    <div class="h-full bg-green-500 rounded-full" style="width: 60%"></div>
                                </div>
                            </div>
                            <button class="self-center px-4 py-2 bg-green-500 text-white text-sm rounded-lg">继续</button>
                        </div>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700" onclick="openCourseDetail('course2')">
                        <div class="flex gap-3">
                            <div class="w-20 h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-play text-white"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium mb-1">客户需求挖掘方法</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400">未开始</p>
                                <div class="mt-2 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                                    <div class="h-full bg-green-500 rounded-full" style="width: 0%"></div>
                                </div>
                            </div>
                            <button class="self-center px-4 py-2 bg-green-500 text-white text-sm rounded-lg">开始</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近学习 -->
            <div class="px-4 pb-6">
                <h3 class="font-semibold text-lg mb-3">最近学习</h3>
                <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
                    <div class="flex items-center gap-3">
                        <div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-check text-white text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium">异议处理实战技巧</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400">已完成 · 得分 92分</p>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 学习Tab ==================== -->
        <div id="tab-learning" class="tab-content">
            <div class="pb-20">
                <!-- 学习路线总览 -->
                <div class="px-4 pt-4 pb-6">
                    <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl p-5 text-white shadow-lg">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="font-bold text-xl">学习路线</h2>
                            <div class="flex items-center gap-2">
                                <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-award"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 总体进度 -->
                        <div class="mb-4">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm opacity-90">总学习进度</span>
                                <span class="font-bold text-lg">40%</span>
                            </div>
                            <div class="h-2.5 bg-white/20 rounded-full overflow-hidden">
                                <div class="h-full bg-white rounded-full" style="width: 40%"></div>
                            </div>
                        </div>
                        
                        <!-- 三个阶段 -->
                        <div class="grid grid-cols-3 gap-2 text-center">
                            <div class="bg-white/20 rounded-xl p-3">
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-2">
                                    <i class="fas fa-check text-sm"></i>
                                </div>
                                <p class="text-xs font-medium">入门阶段</p>
                                <p class="text-xs opacity-75">3/3 完成</p>
                            </div>
                            <div class="bg-white/20 rounded-xl p-3">
                                <div class="w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-2">
                                    <span class="text-xs font-bold">2/4</span>
                                </div>
                                <p class="text-xs font-medium">进阶阶段</p>
                                <p class="text-xs opacity-75">进行中</p>
                            </div>
                            <div class="bg-white/20 rounded-xl p-3">
                                <div class="w-8 h-8 bg-white/30 rounded-full flex items-center justify-center mx-auto mb-2">
                                    <i class="fas fa-lock text-sm"></i>
                                </div>
                                <p class="text-xs font-medium">精通阶段</p>
                                <p class="text-xs opacity-75">未解锁</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 当前阶段课程列表 -->
                <div class="px-4 mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h3 class="font-semibold text-lg">进阶阶段 · 方案推荐与价值传递</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">2/4 完成</p>
                        </div>
                        <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 text-xs font-medium rounded-full">进行中</span>
                    </div>
                    
                    <!-- 课程卡片网格 -->
                    <div class="grid grid-cols-2 gap-3">
                        <!-- 课程1：已完成 -->
                        <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm border border-gray-100 dark:border-gray-700" onclick="openCourseDetail('course1')">
                            <div class="h-24 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
                                <i class="fas fa-bullhorn text-white text-2xl"></i>
                            </div>
                            <div class="p-3">
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="px-1.5 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-600 text-[10px] rounded">营销</span>
                                    <span class="text-[10px] text-gray-400">12课时</span>
                                </div>
                                <h4 class="font-medium text-sm mb-1">产品卖点提炼技巧</h4>
                                <div class="h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-1">
                                    <div class="h-full bg-green-500 rounded-full" style="width: 100%"></div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] text-green-600 font-medium">已完成</span>
                                    <button class="text-xs text-blue-500 hover:text-blue-600">回看</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 课程2：进行中 -->
                        <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm border-2 border-green-500" onclick="openCourseDetail('course2')">
                            <div class="relative h-24 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
                                <i class="fas fa-search text-white text-2xl"></i>
                                <div class="absolute top-2 right-2 px-2 py-0.5 bg-white/20 rounded-full text-white text-[10px]">进行中</div>
                            </div>
                            <div class="p-3">
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-600 text-[10px] rounded">营销</span>
                                    <span class="text-[10px] text-gray-400">8课时</span>
                                </div>
                                <h4 class="font-medium text-sm mb-1">SPIN提问法</h4>
                                <div class="h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-1">
                                    <div class="h-full bg-blue-500 rounded-full" style="width: 60%"></div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] text-blue-600 font-medium">60%</span>
                                    <button class="px-3 py-1 bg-green-500 text-white text-xs rounded-lg">继续</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 课程3：未开始 -->
                        <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm border border-gray-100 dark:border-gray-700 opacity-70" onclick="openCourseDetail('course3')">
                            <div class="h-24 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center relative">
                                <i class="fas fa-gem text-white text-2xl"></i>
                                <div class="absolute top-2 right-2 px-2 py-0.5 bg-white/20 rounded-full text-white text-[10px]">
                                    <i class="fas fa-lock text-xs"></i>
                                </div>
                            </div>
                            <div class="p-3">
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="px-1.5 py-0.5 bg-purple-100 dark:bg-purple-900/30 text-purple-600 text-[10px] rounded">产品</span>
                                    <span class="text-[10px] text-gray-400">15课时</span>
                                </div>
                                <h4 class="font-medium text-sm mb-1">产品知识掌握</h4>
                                <div class="h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-1">
                                    <div class="h-full bg-gray-300 rounded-full" style="width: 0%"></div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] text-gray-500">未开始</span>
                                    <button class="px-3 py-1 bg-gray-300 text-gray-600 text-xs rounded-lg">开始</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 课程4：未开始 -->
                        <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm border border-gray-100 dark:border-gray-700 opacity-70" onclick="openCourseDetail('course4')">
                            <div class="h-24 bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center relative">
                                <i class="fas fa-handshake text-white text-2xl"></i>
                                <div class="absolute top-2 right-2 px-2 py-0.5 bg-white/20 rounded-full text-white text-[10px]">
                                    <i class="fas fa-lock text-xs"></i>
                                </div>
                            </div>
                            <div class="p-3">
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="px-1.5 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-600 text-[10px] rounded">营销</span>
                                    <span class="text-[10px] text-gray-400">10课时</span>
                                </div>
                                <h4 class="font-medium text-sm mb-1">竞品对比应对</h4>
                                <div class="h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-1">
                                    <div class="h-full bg-gray-300 rounded-full" style="width: 0%"></div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] text-gray-500">未开始</span>
                                    <button class="px-3 py-1 bg-gray-300 text-gray-600 text-xs rounded-lg">开始</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 去陪练按钮 -->
                    <div class="mt-4 p-4 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-xl border border-green-500/20">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="font-medium text-sm mb-1">学完课程，去AI陪练</p>
                                <p class="text-xs text-gray-500">实战演练，巩固学习成果</p>
                            </div>
                            <button onclick="switchTab('practice')" class="px-4 py-2 bg-green-500 text-white text-sm rounded-lg flex items-center gap-2">
                                <i class="fas fa-robot"></i>
                                开始陪练
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 全部阶段课程 -->
                <div class="px-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-lg">全部学习模块</h3>
                    </div>
                    
                    <!-- 入门阶段：客户接待与需求挖掘 -->
                    <div class="mb-6">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <h4 class="font-medium">入门阶段</h4>
                            <span class="px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-600 text-xs rounded-full">已完成</span>
                        </div>
                        <p class="text-xs text-gray-500 mb-3">客户接待与需求挖掘 · 4门课程</p>
                        <div class="grid grid-cols-4 gap-2">
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700">
                                <div class="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-user-tag text-green-600 dark:text-green-400 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">客户类型识别</p>
                                <p class="text-[8px] text-green-500">✓ 已完成</p>
                            </div>
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700">
                                <div class="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-search text-green-600 dark:text-green-400 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">需求挖掘</p>
                                <p class="text-[8px] text-green-500">✓ 已完成</p>
                            </div>
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700">
                                <div class="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-coins text-green-600 dark:text-green-400 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">预算判断</p>
                                <p class="text-[8px] text-green-500">✓ 已完成</p>
                            </div>
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700">
                                <div class="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-edit text-green-600 dark:text-green-400 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">客户画像</p>
                                <p class="text-[8px] text-green-500">✓ 已完成</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 进阶阶段：方案推荐与价值传递 -->
                    <div class="mb-6">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
                                <span class="text-xs font-bold text-white">2/4</span>
                            </div>
                            <h4 class="font-medium">进阶阶段</h4>
                            <span class="px-2 py-0.5 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 text-xs rounded-full">进行中</span>
                        </div>
                        <p class="text-xs text-gray-500 mb-3">方案推荐与价值传递 · 4门课程</p>
                        <div class="grid grid-cols-4 gap-2">
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-green-500">
                                <div class="w-8 h-8 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-bullhorn text-green-600 dark:text-green-400 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">产品卖点</p>
                                <p class="text-[8px] text-green-500">✓ 已完成</p>
                            </div>
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border-2 border-blue-500 relative">
                                <div class="absolute -top-1 -right-1 w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
                                    <span class="text-white text-[8px] font-bold">!</span>
                                </div>
                                <div class="w-8 h-8 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-search text-blue-600 dark:text-blue-400 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">SPIN提问</p>
                                <p class="text-[8px] text-blue-500">60% 进行中</p>
                            </div>
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700 opacity-60">
                                <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-gem text-gray-400 dark:text-gray-300 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">产品知识</p>
                                <p class="text-[8px] text-gray-400">未开始</p>
                            </div>
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700 opacity-60">
                                <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-handshake text-gray-400 dark:text-gray-300 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">竞品应对</p>
                                <p class="text-[8px] text-gray-400">未开始</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 精通阶段：异议处理与报价成交 -->
                    <div class="mb-4">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-6 h-6 bg-gray-300 dark:bg-gray-600 rounded-full flex items-center justify-center">
                                <i class="fas fa-lock text-gray-500 text-xs"></i>
                            </div>
                            <h4 class="font-medium">精通阶段</h4>
                            <span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-800 text-gray-500 text-xs rounded-full">未解锁</span>
                        </div>
                        <p class="text-xs text-gray-500 mb-3">异议处理与报价成交 · 4门课程</p>
                        <div class="grid grid-cols-4 gap-2 opacity-50">
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700">
                                <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-exclamation-circle text-gray-400 dark:text-gray-300 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">异议处理</p>
                                <p class="text-[8px] text-gray-400">
                                    <i class="fas fa-lock"></i>
                                </p>
                            </div>
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700">
                                <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-file-invoice text-gray-400 dark:text-gray-300 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">报价技巧</p>
                                <p class="text-[8px] text-gray-400">
                                    <i class="fas fa-lock"></i>
                                </p>
                            </div>
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700">
                                <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-flag text-gray-400 dark:text-gray-300 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">成交信号</p>
                                <p class="text-[8px] text-gray-400">
                                    <i class="fas fa-lock"></i>
                                </p>
                            </div>
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-2 text-center shadow-sm border border-gray-100 dark:border-gray-700">
                                <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mx-auto mb-1">
                                    <i class="fas fa-rocket text-gray-400 dark:text-gray-300 text-xs"></i>
                                </div>
                                <p class="text-[10px] font-medium">逼单技巧</p>
                                <p class="text-[8px] text-gray-400">
                                    <i class="fas fa-lock"></i>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 陪练Tab ==================== -->
        <div id="tab-practice" class="tab-content">
            <div class="px-4 pt-4 pb-6">
                <!-- 陪练记录卡片 -->
                <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-2xl p-4 mb-6 shadow-lg">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-green-100 text-sm mb-1">最近陪练</p>
                            <p class="text-white font-semibold">价格敏感型客户</p>
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-bold text-white">88</p>
                            <p class="text-green-100 text-xs">上次得分</p>
                        </div>
                    </div>
                    <div class="mt-3 flex items-center gap-2">
                        <button class="flex-1 bg-white/20 hover:bg-white/30 text-white text-sm font-medium py-2.5 rounded-xl transition-colors flex items-center justify-center gap-2">
                            <i class="fas fa-repeat"></i>
                            <span>继续练习</span>
                        </button>
                        <button class="flex-1 bg-white text-green-600 text-sm font-medium py-2.5 rounded-xl hover:bg-green-50 transition-colors flex items-center justify-center gap-2">
                            <i class="fas fa-history"></i>
                            <span>查看记录</span>
                        </button>
                    </div>
                </div>

                <!-- 学习进度 -->
                <div class="grid grid-cols-3 gap-3 mb-6">
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700 text-center">
                        <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-bullseye text-green-600 dark:text-green-400"></i>
                        </div>
                        <p class="text-2xl font-bold">28</p>
                        <p class="text-xs text-gray-500">陪练次数</p>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700 text-center">
                        <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-trophy text-blue-600 dark:text-blue-400"></i>
                        </div>
                        <p class="text-2xl font-bold">85</p>
                        <p class="text-xs text-gray-500">平均得分</p>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700 text-center">
                        <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mx-auto mb-2">
                            <i class="fas fa-chart-line text-purple-600 dark:text-purple-400"></i>
                        </div>
                        <p class="text-2xl font-bold">+12%</p>
                        <p class="text-xs text-gray-500">进步幅度</p>
                    </div>
                </div>

                <!-- 场景选择 -->
                <div class="mb-4">
                    <h2 class="font-semibold text-xl mb-2">选择陪练场景</h2>
                    <p class="text-gray-500 dark:text-gray-400 text-sm mb-4">选择一种客户类型开始AI陪练</p>

                    <div class="flex gap-2 overflow-x-auto no-scrollbar pb-2">
                        <button class="category-btn active px-4 py-2 bg-green-500 text-white rounded-full text-sm whitespace-nowrap" data-category="all">全部</button>
                        <button class="category-btn px-4 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 rounded-full text-sm whitespace-nowrap" data-category="reception">初次接待</button>
                        <button class="category-btn px-4 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 rounded-full text-sm whitespace-nowrap" data-category="presentation">方案讲解</button>
                        <button class="category-btn px-4 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 rounded-full text-sm whitespace-nowrap" data-category="objection">异议处理</button>
                        <button class="category-btn px-4 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 rounded-full text-sm whitespace-nowrap" data-category="closing">报价成交</button>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="reception" onclick="startPractice('first-visit')">
                        <div class="w-16 h-16 bg-blue-50 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-user-plus text-blue-500 dark:text-blue-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">初次进店</h3>
                        <p class="text-sm text-gray-500">客户首次到店，建立信任</p>
                    </div>

                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="reception" onclick="startPractice('online-consult')">
                        <div class="w-16 h-16 bg-green-50 dark:bg-green-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-comments text-green-500 dark:text-green-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">线上咨询</h3>
                        <p class="text-sm text-gray-500">客户在线咨询，需求挖掘</p>
                    </div>

                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="presentation" onclick="startPractice('kitchen-plan')">
                        <div class="w-16 h-16 bg-orange-50 dark:bg-orange-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-utensils text-orange-500 dark:text-orange-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">厨房方案</h3>
                        <p class="text-sm text-gray-500">讲解厨房设计方案</p>
                    </div>

                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="presentation" onclick="startPractice('wardrobe-plan')">
                        <div class="w-16 h-16 bg-purple-50 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-shirt text-purple-500 dark:text-purple-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">衣柜方案</h3>
                        <p class="text-sm text-gray-500">讲解衣柜设计方案</p>
                    </div>

                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="objection" onclick="startPractice('price-objection')">
                        <div class="w-16 h-16 bg-red-50 dark:bg-red-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-tag text-red-500 dark:text-red-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">价格异议</h3>
                        <p class="text-sm text-gray-500">客户觉得价格贵</p>
                    </div>

                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="objection" onclick="startPractice('brand-objection')">
                        <div class="w-16 h-16 bg-yellow-50 dark:bg-yellow-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-question-circle text-yellow-500 dark:text-yellow-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">品牌异议</h3>
                        <p class="text-sm text-gray-500">客户质疑品牌知名度</p>
                    </div>

                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="objection" onclick="startPractice('quality-objection')">
                        <div class="w-16 h-16 bg-cyan-50 dark:bg-cyan-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-shield text-cyan-500 dark:text-cyan-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">质量顾虑</h3>
                        <p class="text-sm text-gray-500">客户担心产品质量</p>
                    </div>

                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="closing" onclick="startPractice('price-closing')">
                        <div class="w-16 h-16 bg-pink-50 dark:bg-pink-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-file text-pink-500 dark:text-pink-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">报价签约</h3>
                        <p class="text-sm text-gray-500">讲解报价并促成签约</p>
                    </div>

                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="closing" onclick="startPractice('hesitate-closing')">
                        <div class="w-16 h-16 bg-indigo-50 dark:bg-indigo-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-clock text-indigo-500 dark:text-indigo-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">犹豫客户</h3>
                        <p class="text-sm text-gray-500">客户犹豫不决，需要逼单</p>
                    </div>

                    <div class="scene-card bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 text-center" data-category="closing" onclick="startPractice('family-closing')">
                        <div class="w-16 h-16 bg-teal-50 dark:bg-teal-900/30 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-users text-teal-500 dark:text-teal-400 text-2xl"></i>
                        </div>
                        <h3 class="font-semibold mb-1">全家决策</h3>
                        <p class="text-sm text-gray-500">家庭成员共同决策</p>
                    </div>
                </div>
            </div>

            <!-- 对话界面 -->
            <div id="chat-interface" class="hidden fixed inset-0 bg-gray-50 dark:bg-[#0f1419] z-[60] flex flex-col">
                <!-- 头部 -->
                <div class="flex-shrink-0 bg-white dark:bg-[#1a1f2e] px-4 flex items-center justify-between shadow-lg border-b border-gray-200 dark:border-gray-700/50" style="padding-top: calc(env(safe-area-inset-top) + 12px); padding-bottom: 12px;">
                    <button onclick="closePractice()" class="w-11 h-11 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors rounded-xl hover:bg-gray-100 dark:hover:bg-white/10">
                        <i class="fas fa-chevron-left text-lg text-gray-600 dark:text-gray-400"></i>
                    </button>
                    <div class="text-center flex-1">
                        <h3 class="font-semibold text-lg text-gray-900 dark:text-white" id="chat-title">价格敏感型客户</h3>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">AI陪练中</p>
                    </div>
                    <button onclick="endPractice()" class="px-4 py-2 bg-[#00d68f] text-white text-sm rounded-xl hover:opacity-90 transition-opacity">结束</button>
                </div>

                <!-- 消息区域 -->
                <div id="chat-messages" class="flex-1 overflow-y-auto px-4 py-4 space-y-4">
                    <div class="flex gap-3 animate-fadeIn">
                        <div class="w-10 h-10 bg-gradient-to-br from-[#00d68f] to-[#00b377] rounded-full flex items-center justify-center flex-shrink-0 shadow-lg shadow-[#00d68f]/20">
                            <i class="fas fa-robot text-white text-sm"></i>
                        </div>
                        <div class="bg-gray-100 dark:bg-[#252d3d] rounded-2xl rounded-tl-sm px-5 py-3.5 max-w-[80%] shadow-lg">
                            <p class="text-sm text-gray-900 dark:text-gray-100 leading-relaxed">你好，我看了你们的产品，感觉价格有点贵啊。隔壁那家比你们便宜20%呢。</p>
                        </div>
                    </div>
                </div>

                <!-- 快捷回复 -->
                <div id="quick-replies" class="px-4 py-3 bg-white dark:bg-[#1a1f2e] border-t border-gray-200 dark:border-gray-700/50">
                    <div class="flex gap-2 overflow-x-auto">
                        <button class="quick-reply px-4 py-2 bg-gray-100 dark:bg-[#252d3d] text-gray-700 dark:text-gray-200 rounded-full text-sm whitespace-nowrap hover:bg-gray-200 dark:hover:bg-[#2f3a4a] transition-colors active:scale-95" onclick="sendQuickReply('我们的品质更有保障')">我们的品质更有保障</button>
                        <button class="quick-reply px-4 py-2 bg-gray-100 dark:bg-[#252d3d] text-gray-700 dark:text-gray-200 rounded-full text-sm whitespace-nowrap hover:bg-gray-200 dark:hover:bg-[#2f3a4a] transition-colors active:scale-95" onclick="sendQuickReply('可以给您申请优惠')">可以给您申请优惠</button>
                        <button class="quick-reply px-4 py-2 bg-gray-100 dark:bg-[#252d3d] text-gray-700 dark:text-gray-200 rounded-full text-sm whitespace-nowrap hover:bg-gray-200 dark:hover:bg-[#2f3a4a] transition-colors active:scale-95" onclick="sendQuickReply('一分钱一分货')">一分钱一分货</button>
                    </div>
                </div>

                <!-- 输入框 -->
                <div class="flex-shrink-0 bg-white dark:bg-[#1a1f2e] border-t border-gray-200 dark:border-gray-700/50 shadow-[0_-4px_20px_rgba(0,0,0,0.1)] z-[85]">
                    <div class="px-4 pb-4 flex items-center gap-3" style="padding-bottom: calc(env(safe-area-inset-bottom) + 16px);">
                        <button class="w-11 h-11 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors rounded-xl hover:bg-gray-100 dark:hover:bg-white/10">
                            <i class="fas fa-microphone text-lg text-gray-600 dark:text-gray-400"></i>
                        </button>
                        <div class="flex-1 bg-gray-100 dark:bg-[#252d3d] rounded-full px-5 py-3 shadow-inner">
                            <input type="text" id="chat-input" placeholder="输入消息..." class="w-full bg-transparent outline-none text-base text-gray-900 dark:text-white placeholder-gray-500" onkeypress="handleEnter(event)">
                        </div>
                        <button onclick="sendMessage()" class="w-11 h-11 bg-gradient-to-br from-[#00d68f] to-[#00b377] rounded-full flex items-center justify-center text-white hover:shadow-lg hover:shadow-[#00d68f]/30 transition-all active:scale-95">
                            <i class="fas fa-paper-plane text-sm text-white"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 问答Tab ==================== -->
        <div id="tab-qa" class="tab-content hidden">
            <div class="fixed inset-0 bg-gray-50 dark:bg-[#0f1419] z-[60]">
                <!-- 侧边栏遮罩 -->
                <div id="sidebar-overlay" class="absolute inset-0 bg-black/70 z-[75] hidden" onclick="toggleSidebar()"></div>
                
                <!-- 侧边栏历史记录 -->
                <div id="qa-sidebar" class="absolute left-0 top-0 bottom-0 w-[75vw] bg-white dark:bg-[#1a1f2e] z-[90] transform -translate-x-full transition-transform duration-300 shadow-2xl">
                    <div class="h-full flex flex-col">
                        <div class="px-5 py-6 border-b border-gray-200 dark:border-gray-700/50 flex items-center justify-between" style="padding-top: calc(env(safe-area-inset-top) + 16px);">
                            <h3 class="font-semibold text-lg text-gray-900 dark:text-white">历史记录</h3>
                            <button onclick="toggleSidebar()" class="w-10 h-10 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-white/10">
                                <i class="fas fa-times text-lg text-gray-600 dark:text-gray-400"></i>
                            </button>
                        </div>
                        <div class="flex-1 overflow-y-auto">
                            <div class="px-5 py-3 space-y-2" id="history-list">
                                <!-- 历史记录项将通过JS动态渲染 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 主内容容器 -->
                <div class="h-full flex flex-col">
                    <!-- 头部 -->
                    <div class="flex-shrink-0 bg-white dark:bg-[#1a1f2e] px-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700/50" style="padding-top: calc(env(safe-area-inset-top) + 12px); padding-bottom: 12px;">
                        <button onclick="toggleSidebar()" class="w-11 h-11 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors rounded-xl hover:bg-gray-100 dark:hover:bg-white/10">
                            <i class="fas fa-bars text-lg text-gray-600 dark:text-gray-400"></i>
                        </button>
                        <div class="text-center flex-1">
                            <h2 class="font-semibold text-lg text-gray-900 dark:text-white">AI知识问答</h2>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">随时随地获取销售知识支持</p>
                        </div>
                        <button onclick="switchTab('home')" class="w-11 h-11 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors rounded-xl hover:bg-gray-100 dark:hover:bg-white/10">
                            <i class="fas fa-times text-lg text-gray-600 dark:text-gray-400"></i>
                        </button>
                    </div>

                    <!-- 消息区域 -->
                    <div id="qa-messages" class="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-4">
                        <div class="flex gap-3">
                            <div class="w-11 h-11 bg-gradient-to-br from-[#00d68f] to-[#00b377] rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-robot text-white text-sm"></i>
                            </div>
                            <div class="bg-gray-100 dark:bg-[#252d3d] rounded-2xl rounded-tl-sm px-5 py-3.5 max-w-[80%]">
                                <p class="text-sm text-gray-900 dark:text-gray-100 leading-relaxed">你好！我是你的AI知识助手。有什么销售问题可以随时问我~</p>
                            </div>
                        </div>
                    </div>

                    <!-- 底部输入区 -->
                    <div class="flex-shrink-0 bg-white dark:bg-[#1a1f2e] border-t border-gray-200 dark:border-gray-700/50" style="padding-bottom: env(safe-area-inset-bottom);">
                        <div class="px-4 py-3 flex items-center gap-3">
                            <button onclick="newConversation()" class="flex items-center gap-2 px-4 py-2.5 bg-green-50 dark:bg-green-500/15 text-green-600 dark:text-green-400 rounded-full text-sm whitespace-nowrap hover:bg-green-100 dark:hover:bg-green-500/25 transition-colors">
                                <i class="fas fa-plus text-xs"></i>
                                <span class="font-medium">新建对话</span>
                            </button>
                            <button onclick="confirmClearConversation()" class="flex items-center gap-2 px-4 py-2.5 bg-red-50 dark:bg-red-500/15 text-red-600 dark:text-red-400 rounded-full text-sm whitespace-nowrap hover:bg-red-100 dark:hover:bg-red-500/25 transition-colors">
                                <i class="fas fa-trash text-xs"></i>
                                <span class="font-medium">清除当前对话</span>
                            </button>
                        </div>
                        <div class="px-4 pb-4 flex items-center gap-3">
                            <button class="w-11 h-11 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors rounded-xl">
                                <i class="fas fa-microphone text-lg text-gray-600 dark:text-gray-400"></i>
                            </button>
                            <div class="flex-1 bg-gray-100 dark:bg-[#252d3d] rounded-full px-5 py-3">
                                <input type="text" id="qa-input" placeholder="发消息或按住说话" class="w-full bg-transparent outline-none text-base text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0">
                            </div>
                            <button id="qa-send-btn" onclick="sendQAQuestion()" class="w-11 h-11 bg-gradient-to-br from-[#00d68f] to-[#00b377] rounded-full flex items-center justify-center text-white">
                                <i class="fas fa-paper-plane text-sm text-white"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 成绩Tab ==================== -->
        <div id="tab-score" class="tab-content hidden">
            <div class="px-4 pt-4 pb-6">
                <!-- 能力画像 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 mb-6">
                    <h3 class="font-semibold text-lg mb-4 text-center">能力画像</h3>
                    <div class="flex justify-center mb-4">
                        <canvas id="radarChart" width="220" height="220"></canvas>
                    </div>
                    <div class="grid grid-cols-5 gap-2 text-center text-xs">
                        <div><span class="text-gray-500">产品知识</span><p class="font-semibold text-green-600">85</p></div>
                        <div><span class="text-gray-500">沟通技巧</span><p class="font-semibold text-green-600">78</p></div>
                        <div><span class="text-gray-500">异议处理</span><p class="font-semibold text-green-600">82</p></div>
                        <div><span class="text-gray-500">成交能力</span><p class="font-semibold text-green-600">75</p></div>
                        <div><span class="text-gray-500">服务意识</span><p class="font-semibold text-green-600">88</p></div>
                    </div>
                </div>

                <!-- 学习统计 -->
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
                                <i class="fas fa-book text-green-600 dark:text-green-400 text-sm"></i>
                            </div>
                            <span class="text-sm text-gray-500">学习时长</span>
                        </div>
                        <p class="text-2xl font-bold">24.5<span class="text-sm font-normal text-gray-500">小时</span></p>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
                                <i class="fas fa-check-circle text-blue-600 dark:text-blue-400 text-sm"></i>
                            </div>
                            <span class="text-sm text-gray-500">完成课程</span>
                        </div>
                        <p class="text-2xl font-bold">12<span class="text-sm font-normal text-gray-500">门</span></p>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
                                <i class="fas fa-robot text-purple-600 dark:text-purple-400 text-sm"></i>
                            </div>
                            <span class="text-sm text-gray-500">AI陪练</span>
                        </div>
                        <p class="text-2xl font-bold">28<span class="text-sm font-normal text-gray-500">次</span></p>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-8 h-8 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
                                <i class="fas fa-star text-orange-600 dark:text-orange-400 text-sm"></i>
                            </div>
                            <span class="text-sm text-gray-500">平均得分</span>
                        </div>
                        <p class="text-2xl font-bold">85<span class="text-sm font-normal text-gray-500">分</span></p>
                    </div>
                </div>

                <!-- 历史记录 -->
                <div>
                    <h3 class="font-semibold text-lg mb-3">学习历史</h3>
                    <div class="space-y-3">
                        <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="font-medium">产品卖点提炼技巧</p>
                                    <p class="text-sm text-gray-500">2024-01-15</p>
                                </div>
                                <span class="px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-600 rounded-full text-sm font-medium">92分</span>
                            </div>
                        </div>
                        <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="font-medium">异议处理实战技巧</p>
                                    <p class="text-sm text-gray-500">2024-01-12</p>
                                </div>
                                <span class="px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-600 rounded-full text-sm font-medium">88分</span>
                            </div>
                        </div>
                        <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="font-medium">客户需求挖掘方法</p>
                                    <p class="text-sm text-gray-500">2024-01-10</p>
                                </div>
                                <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 rounded-full text-sm font-medium">76分</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== 我的Tab ==================== -->
        <div id="tab-profile" class="tab-content">
            <div class="px-4 pt-4 pb-6">
                <!-- 个人信息 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 mb-6">
                    <div class="flex items-center gap-4">
                        <div class="w-20 h-20 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center text-white text-3xl">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-xl">张小明</h3>
                            <p class="text-gray-500 dark:text-gray-400">销售部 · 金牌销售</p>
                            <p class="text-sm text-gray-400 mt-1">工号: S2024001</p>
                        </div>
                        <button class="w-10 h-10 flex items-center justify-center text-gray-400">
                            <i class="fas fa-qrcode text-xl"></i>
                        </button>
                    </div>
                </div>

                <!-- 等级进度 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 mb-6">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="font-semibold">等级进度</h3>
                        <span class="text-sm text-green-600">金牌销售 Lv.3</span>
                    </div>
                    <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-2">
                        <div class="h-full bg-gradient-to-r from-green-400 to-green-600 rounded-full" style="width: 65%"></div>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-500">当前: 6500/10000 经验</span>
                        <span class="text-gray-500">下一级: 铂金销售</span>
                    </div>
                </div>

                <!-- 设置列表 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden mb-6">
                    <div class="px-4 py-4 flex items-center justify-between border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                                <i class="fas fa-moon text-gray-600 dark:text-gray-400"></i>
                            </div>
                            <span>深色模式</span>
                        </div>
                        <button id="theme-toggle" class="w-12 h-6 bg-gray-300 dark:bg-green-500 rounded-full relative transition-colors" onclick="toggleTheme()">
                            <span class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform dark:translate-x-6"></span>
                        </button>
                    </div>
                    <div class="px-4 py-4 flex items-center justify-between border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                                <i class="fas fa-bell text-gray-600 dark:text-gray-400"></i>
                            </div>
                            <span>消息通知</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500"></i>
                    </div>
                    <div class="px-4 py-4 flex items-center justify-between border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                                <i class="fas fa-download text-gray-600 dark:text-gray-400"></i>
                            </div>
                            <span>离线课程</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-sm text-gray-500">已下载 3门</span>
                            <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500"></i>
                        </div>
                    </div>
                    <div class="px-4 py-4 flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                                <i class="fas fa-shield-alt text-gray-600 dark:text-gray-400"></i>
                            </div>
                            <span>隐私设置</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500"></i>
                    </div>
                </div>

                <!-- 其他选项 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden mb-6">
                    <div class="px-4 py-4 flex items-center justify-between border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                                <i class="fas fa-question-circle text-gray-600 dark:text-gray-400"></i>
                            </div>
                            <span>帮助中心</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500"></i>
                    </div>
                    <div class="px-4 py-4 flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                                <i class="fas fa-info-circle text-gray-600 dark:text-gray-400"></i>
                            </div>
                            <span>关于我们</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-sm text-gray-500">v2.1.0</span>
                            <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500"></i>
                        </div>
                    </div>
                </div>

                <!-- 退出登录 -->
                <button onclick="handleLogout()" class="w-full py-3.5 bg-white dark:bg-gray-800 text-red-500 rounded-xl font-medium shadow-sm border border-gray-100 dark:border-gray-700">
                    退出登录
                </button>
            </div>
        </div>
    </main>

    <!-- ==================== 底部Tab导航 ==================== -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 z-40 safe-bottom">
        <div class="flex items-center justify-around h-14">
            <button class="tab-item active flex-1 flex flex-col items-center justify-center gap-1 py-2" data-tab="home" onclick="switchTab('home')">
                <i class="fas fa-home text-lg dark:text-green-500"></i>
                <span class="text-xs">首页</span>
            </button>
            <button class="tab-item flex-1 flex flex-col items-center justify-center gap-1 py-2 text-gray-500 dark:text-gray-400" data-tab="learning" onclick="switchTab('learning')">
                <i class="fas fa-book-open text-lg"></i>
                <span class="text-xs">学习</span>
            </button>
            <button class="tab-item flex-1 flex flex-col items-center justify-center gap-1 py-2 text-gray-500 dark:text-gray-400" data-tab="practice" onclick="switchTab('practice')">
                <i class="fas fa-robot text-lg"></i>
                <span class="text-xs">陪练</span>
            </button>
            <button class="tab-item flex-1 flex flex-col items-center justify-center gap-1 py-2 text-gray-500 dark:text-gray-400" data-tab="qa" onclick="switchTab('qa')">
                <i class="fas fa-comment-dots text-lg"></i>
                <span class="text-xs">问答</span>
            </button>
            <button class="tab-item flex-1 flex flex-col items-center justify-center gap-1 py-2 text-gray-500 dark:text-gray-400" data-tab="profile" onclick="switchTab('profile')">
                <i class="fas fa-user text-lg"></i>
                <span class="text-xs">我的</span>
            </button>
        </div>
    </nav>

    <!-- ==================== Sheet遮罩层 ==================== -->
    <div id="sheet-overlay" class="sheet-overlay fixed inset-0 bg-black/50 z-40" onclick="closeAllSheets()"></div>

    <!-- ==================== 清除对话确认模态框 ==================== -->
    <div id="clear-conversation-modal" class="fixed inset-0 z-[100] hidden">
        <div class="absolute inset-0 bg-black/50" onclick="closeClearModal()"></div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-[85vw] max-w-sm bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden">
                <div class="p-6">
                    <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                        <i class="fas fa-exclamation-triangle text-3xl text-red-500"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-center mb-2">确认清除当前对话</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center leading-relaxed">
                        清除后将无法找回当前对话记录，确定要清除吗？
                    </p>
                </div>
                <div class="flex border-t border-gray-200 dark:border-gray-700">
                    <button onclick="closeClearModal()" class="flex-1 py-4 text-gray-600 dark:text-gray-400 font-medium border-r border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
                        取消
                    </button>
                    <button onclick="clearCurrentConversation()" class="flex-1 py-4 text-red-500 font-medium hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors">
                        确定清除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 登录注册Sheet ==================== -->
    <div id="login-sheet" class="sheet fixed inset-0 bg-white dark:bg-gray-800 z-50 overflow-hidden flex flex-col transform translate-y-full">
        <div class="sticky top-0 bg-white dark:bg-gray-800 px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
            <div class="w-12 h-1 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-3"></div>
            <div class="flex items-center justify-between">
                <h3 class="font-semibold text-lg">欢迎使用</h3>
                <button onclick="closeLoginSheet()" class="w-8 h-8 flex items-center justify-center">
                    <i class="fas fa-times text-gray-500 dark:text-gray-400"></i>
                </button>
            </div>
        </div>
        <div class="flex-1 overflow-y-auto p-6">
            <!-- 登录注册切换标签 -->
            <div class="flex bg-gray-100 dark:bg-gray-700 rounded-xl p-1 mb-6">
                <button id="login-tab-btn" onclick="switchLoginReg('login')" class="flex-1 py-2.5 rounded-lg text-sm font-medium bg-white dark:bg-gray-600 text-green-600 dark:text-green-400 shadow-sm transition-all">登录</button>
                <button id="reg-tab-btn" onclick="switchLoginReg('register')" class="flex-1 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-300 transition-all">注册</button>
            </div>

            <!-- 登录表单 -->
            <div id="login-form">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">手机号</label>
                    <div class="relative">
                        <input type="tel" id="login-phone" maxlength="11" placeholder="请输入手机号" 
                            class="w-full px-4 py-3.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 dark:text-white"
                            oninput="value=value.replace(/[^0-9]/g,'')">
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">密码</label>
                    <div class="relative">
                        <input type="password" id="login-password" placeholder="请输入密码" 
                            class="w-full px-4 py-3.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 dark:text-white pr-12">
                        <button type="button" onclick="togglePassword('login-password', this)" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div class="flex items-center justify-between mb-6">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" id="remember-me" class="w-5 h-5 rounded border-gray-300 dark:border-gray-600 text-green-500 focus:ring-green-500">
                        <span class="text-sm text-gray-600 dark:text-gray-400">记住密码</span>
                    </label>
                    <button class="text-sm text-green-600 dark:text-green-400">忘记密码？</button>
                </div>
                <button onclick="handleLogin()" class="w-full py-4 bg-gradient-to-r from-green-500 to-green-600 text-white font-semibold rounded-xl hover:from-green-600 hover:to-green-700 transition-all">
                    登录
                </button>
            </div>

            <!-- 注册表单 -->
            <div id="register-form" class="hidden">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">手机号</label>
                    <div class="relative flex gap-2">
                        <input type="tel" id="reg-phone" maxlength="11" placeholder="请输入手机号" 
                            class="flex-1 px-4 py-3.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 dark:text-white"
                            oninput="value=value.replace(/[^0-9]/g,'')">
                        <button type="button" id="send-code-btn" onclick="sendVerifyCode()" class="px-4 py-3.5 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 text-sm rounded-xl whitespace-nowrap">
                            获取验证码
                        </button>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">验证码</label>
                    <input type="text" id="reg-code" maxlength="6" placeholder="请输入验证码" 
                        class="w-full px-4 py-3.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 dark:text-white"
                        oninput="value=value.replace(/[^0-9]/g,'')">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">设置密码</label>
                    <div class="relative">
                        <input type="password" id="reg-password" placeholder="请设置密码（6-20位）" 
                            class="w-full px-4 py-3.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 dark:text-white pr-12">
                        <button type="button" onclick="togglePassword('reg-password', this)" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">确认密码</label>
                    <div class="relative">
                        <input type="password" id="reg-confirm-password" placeholder="请再次输入密码" 
                            class="w-full px-4 py-3.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 dark:text-white pr-12">
                        <button type="button" onclick="togglePassword('reg-confirm-password', this)" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div class="mb-6">
                    <label class="flex items-start gap-2 cursor-pointer">
                        <input type="checkbox" id="agree-terms" class="w-5 h-5 rounded border-gray-300 dark:border-gray-600 text-green-500 focus:ring-green-500 mt-0.5">
                        <span class="text-sm text-gray-600 dark:text-gray-400">我已阅读并同意<a href="#" class="text-green-600 dark:text-green-400">《用户协议》</a>和<a href="#" class="text-green-600 dark:text-green-400">《隐私政策》</a></span>
                    </label>
                </div>
                <button onclick="handleRegister()" class="w-full py-4 bg-gradient-to-r from-green-500 to-green-600 text-white font-semibold rounded-xl hover:from-green-600 hover:to-green-700 transition-all">
                    注册
                </button>
            </div>
        </div>
    </div>

    <!-- ==================== 课程详情Sheet ==================== -->
    <div id="course-detail-sheet" class="sheet fixed inset-0 bg-white dark:bg-gray-800 z-50 overflow-hidden flex flex-col">
        <div class="sticky top-0 bg-white dark:bg-gray-800 px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
            <div class="w-12 h-1 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-3"></div>
            <div class="flex items-center justify-between">
                <h3 class="font-semibold text-lg">课程详情</h3>
                <button onclick="closeAllSheets()" class="w-8 h-8 flex items-center justify-center">
                    <i class="fas fa-times text-gray-500 dark:text-gray-400"></i>
                </button>
            </div>
        </div>
        <div class="flex-1 overflow-y-auto">
            <div class="h-48 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
                <i class="fas fa-bullhorn text-white text-6xl"></i>
            </div>
            <div class="p-4">
                <h2 class="font-semibold text-xl mb-2" id="detail-title">产品卖点提炼技巧</h2>
                <div class="flex items-center gap-4 mb-4 text-sm text-gray-500">
                    <span><i class="fas fa-clock mr-1"></i>45分钟</span>
                    <span><i class="fas fa-signal mr-1"></i>初级</span>
                    <span><i class="fas fa-user mr-1"></i>1.2万人学习</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
                    本课程将帮助你掌握产品卖点提炼的核心方法，学习如何从客户角度出发，用简洁有力的语言传达产品价值，提升销售转化率。
                </p>
                <h4 class="font-semibold mb-3">课程大纲</h4>
                <div class="space-y-3 mb-6">
                    <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center text-sm">1</div>
                        <span class="flex-1">卖点提炼的基本概念</span>
                        <i class="fas fa-check-circle text-green-500"></i>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center text-sm">2</div>
                        <span class="flex-1">FAB法则实战应用</span>
                        <i class="fas fa-check-circle text-green-500"></i>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <div class="w-8 h-8 bg-gray-300 dark:bg-gray-600 text-white rounded-full flex items-center justify-center text-sm">3</div>
                        <span class="flex-1">客户视角的卖点转化</span>
                        <span class="text-sm text-gray-400">12:30</span>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <div class="w-8 h-8 bg-gray-300 dark:bg-gray-600 text-white rounded-full flex items-center justify-center text-sm">4</div>
                        <span class="flex-1">实战演练与点评</span>
                        <span class="text-sm text-gray-400">15:00</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 safe-bottom">
            <button onclick="startLearning()" class="w-full py-4 bg-green-500 text-white font-semibold rounded-xl shadow-lg shadow-green-500/30">
                开始学习
            </button>
        </div>
    </div>

    <!-- ==================== 视频播放页 ==================== -->
    <div id="video-page" class="hidden fixed inset-0 bg-black z-50 flex flex-col">
        <!-- 视频播放器 -->
        <div class="flex-1 video-player flex items-center justify-center relative">
            <button onclick="closeVideo()" class="absolute top-4 left-4 z-10 w-10 h-10 bg-black/50 rounded-full flex items-center justify-center text-white">
                <i class="fas fa-chevron-down"></i>
            </button>
            <div class="text-center text-white">
                <i class="fas fa-play-circle text-6xl mb-4 opacity-80"></i>
                <p class="text-lg">视频播放中...</p>
                <p class="text-sm opacity-60 mt-2">点击屏幕可暂停/播放</p>
            </div>
            <!-- 进度条 -->
            <div class="absolute bottom-20 left-4 right-4">
                <div class="h-1 bg-white/30 rounded-full overflow-hidden">
                    <div class="h-full bg-green-500 rounded-full" style="width: 60%"></div>
                </div>
                <div class="flex justify-between text-white/80 text-sm mt-2">
                    <span>18:00</span>
                    <span>30:00</span>
                </div>
            </div>
        </div>
        <!-- 底部信息 -->
        <div class="bg-gray-900 text-white p-4 safe-bottom">
            <h3 class="font-semibold mb-2">产品卖点提炼技巧</h3>
            <p class="text-sm text-gray-400 mb-4">第3节：客户视角的卖点转化</p>
            <button onclick="enterQuiz()" class="w-full py-3.5 bg-green-500 rounded-xl font-medium">
                完成学习，进入答题
            </button>
        </div>
    </div>

    <!-- ==================== 答题页 ==================== -->
    <div id="quiz-page" class="hidden fixed inset-0 bg-gray-50 dark:bg-gray-900 z-50 flex flex-col">
        <!-- 头部 -->
        <div class="bg-white dark:bg-gray-800 px-4 py-3 flex items-center justify-between border-b border-gray-200 dark:border-gray-700 safe-top">
            <button onclick="closeQuiz()" class="w-10 h-10 flex items-center justify-center -ml-2 text-gray-600 dark:text-gray-400">
                <i class="fas fa-times text-lg"></i>
            </button>
            <h3 class="font-semibold">答题闯关</h3>
            <span class="text-sm text-gray-500">1/5</span>
        </div>

        <!-- 题目内容 -->
        <div class="flex-1 overflow-y-auto p-4">
            <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm">
                <span class="inline-block px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-600 text-sm rounded-full mb-4">单选题</span>
                <h4 class="text-lg font-medium mb-6 leading-relaxed">
                    在介绍产品时，以下哪种方式最符合"客户视角"的卖点提炼原则？
                </h4>

                <div class="space-y-3" id="quiz-options">
                    <label class="quiz-option flex items-start gap-3 p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl cursor-pointer hover:border-green-500 transition-colors">
                        <input type="radio" name="answer" value="A" class="mt-1 w-5 h-5 text-green-500">
                        <span>A. 详细介绍产品的所有技术参数和配置</span>
                    </label>
                    <label class="quiz-option flex items-start gap-3 p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl cursor-pointer hover:border-green-500 transition-colors">
                        <input type="radio" name="answer" value="B" class="mt-1 w-5 h-5 text-green-500">
                        <span>B. 强调产品能为客户解决什么具体问题</span>
                    </label>
                    <label class="quiz-option flex items-start gap-3 p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl cursor-pointer hover:border-green-500 transition-colors">
                        <input type="radio" name="answer" value="C" class="mt-1 w-5 h-5 text-green-500">
                        <span>C. 与竞争对手进行详细对比分析</span>
                    </label>
                    <label class="quiz-option flex items-start gap-3 p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl cursor-pointer hover:border-green-500 transition-colors">
                        <input type="radio" name="answer" value="D" class="mt-1 w-5 h-5 text-green-500">
                        <span>D. 重点介绍产品的生产工艺和原材料</span>
                    </label>
                </div>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="bg-white dark:bg-gray-800 px-4 py-4 border-t border-gray-200 dark:border-gray-700 safe-bottom">
            <button onclick="submitAnswer()" class="w-full py-4 bg-green-500 text-white font-semibold rounded-xl">
                提交答案
            </button>
        </div>
    </div>

    <!-- ==================== 答题结果Sheet ==================== -->
    <div id="quiz-result-sheet" class="sheet fixed inset-0 bg-white dark:bg-gray-800 z-50 flex flex-col">
        <div class="sticky top-0 bg-white dark:bg-gray-800 px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
            <div class="w-12 h-1 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-3"></div>
        </div>
        <div class="flex-1 overflow-y-auto p-6">
            <div class="text-center mb-6">
                <div class="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="text-4xl font-bold text-green-600">100</span>
                </div>
                <h3 class="font-semibold text-xl mb-1">回答正确！</h3>
                <p class="text-gray-500">获得 20 积分</p>
            </div>

            <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-4 mb-6">
                <h4 class="font-medium mb-3">答案解析</h4>
                <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed mb-3">
                    正确答案是 <span class="text-green-600 font-semibold">B</span>
                </p>
                <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                    "客户视角"的核心是从客户的需求出发，强调产品能为客户带来的价值和解决的问题，而不是单纯介绍产品特性。
                </p>
            </div>
        </div>
        <div class="p-6 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 safe-bottom">
            <div class="flex gap-3">
                <button onclick="closeAllSheets(); showQuizPage()" class="flex-1 py-3.5 border border-gray-300 dark:border-gray-600 rounded-xl font-medium">
                    下一题
                </button>
                <button onclick="closeAllSheets(); switchTab('practice')" class="flex-1 py-3.5 bg-green-500 text-white rounded-xl font-medium">
                    进入AI陪练
                </button>
            </div>
        </div>
    </div>

    <!-- ==================== 评分报告Sheet ==================== -->
    <div id="score-report-sheet" class="sheet fixed inset-0 bg-white dark:bg-gray-800 z-50 flex flex-col">
        <div class="sticky top-0 bg-white dark:bg-gray-800 px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
            <div class="w-12 h-1 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-3"></div>
            <div class="flex items-center justify-between">
                <h3 class="font-semibold text-lg">陪练评分报告</h3>
                <button onclick="closeAllSheets()" class="w-8 h-8 flex items-center justify-center">
                    <i class="fas fa-times text-gray-500 dark:text-gray-400"></i>
                </button>
            </div>
        </div>
        <div class="flex-1 overflow-y-auto p-4">
            <!-- 总得分 -->
            <div class="text-center mb-6">
                <div class="w-28 h-28 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-green-500/30">
                    <div class="text-white text-center">
                        <span class="text-5xl font-bold">88</span>
                        <p class="text-sm opacity-80">总分</p>
                    </div>
                </div>
                <h3 class="font-semibold text-xl">表现优秀！</h3>
                <p class="text-gray-500 mt-1">本次陪练用时 8 分钟</p>
            </div>

            <!-- 五维评分 -->
            <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-4 mb-6">
                <h4 class="font-medium mb-4">能力维度评分</h4>
                <div class="space-y-4">
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm">产品知识运用</span>
                            <span class="text-sm font-semibold text-green-600">90</span>
                        </div>
                        <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
                            <div class="h-full bg-green-500 rounded-full score-bar" style="width: 90%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm">沟通表达能力</span>
                            <span class="text-sm font-semibold text-green-600">85</span>
                        </div>
                        <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
                            <div class="h-full bg-green-500 rounded-full score-bar" style="width: 85%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm">异议处理能力</span>
                            <span class="text-sm font-semibold text-yellow-600">78</span>
                        </div>
                        <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
                            <div class="h-full bg-yellow-500 rounded-full score-bar" style="width: 78%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm">成交引导能力</span>
                            <span class="text-sm font-semibold text-green-600">88</span>
                        </div>
                        <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
                            <div class="h-full bg-green-500 rounded-full score-bar" style="width: 88%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm">服务态度</span>
                            <span class="text-sm font-semibold text-green-600">95</span>
                        </div>
                        <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
                            <div class="h-full bg-green-500 rounded-full score-bar" style="width: 95%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 改进建议 -->
            <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-4 mb-6">
                <h4 class="font-medium mb-3">改进建议</h4>
                <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                    <li class="flex items-start gap-2">
                        <i class="fas fa-lightbulb text-yellow-500 mt-0.5"></i>
                        <span>在客户提出价格异议时，可以更多地强调产品的长期价值而非单纯对比价格</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-lightbulb text-yellow-500 mt-0.5"></i>
                        <span>建议多使用开放式问题引导客户表达真实需求</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 safe-bottom">
            <button onclick="closeAllSheets()" class="w-full py-4 bg-green-500 text-white font-semibold rounded-xl">
                完成
            </button>
        </div>
    </div>

    <script>
        // ==================== Tab切换 ====================
        function switchTab(tabName) {
            // 隐藏所有tab内容
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            // 显示目标tab
            document.getElementById('tab-' + tabName).classList.add('active');

            // 更新底部导航状态
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.remove('active');
                item.classList.add('text-gray-500');
            });
            document.querySelector('.tab-item[data-tab="' + tabName + '"]').classList.add('active');
            document.querySelector('.tab-item[data-tab="' + tabName + '"]').classList.remove('text-gray-500');

            // 如果切换到成绩页，绘制雷达图
            if (tabName === 'score') {
                setTimeout(drawRadarChart, 100);
            }
        }

        // ==================== 分类筛选 ====================
        document.querySelectorAll('.category-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 更新按钮状态
                document.querySelectorAll('.category-btn').forEach(b => {
                    b.classList.remove('bg-green-500', 'text-white');
                    b.classList.add('bg-white', 'dark:bg-gray-800', 'text-gray-600', 'dark:text-gray-300');
                });
                this.classList.remove('bg-white', 'dark:bg-gray-800', 'text-gray-600', 'dark:text-gray-300');
                this.classList.add('bg-green-500', 'text-white');

                // 筛选课程
                const category = this.dataset.category;
                document.querySelectorAll('.course-card').forEach(card => {
                    if (category === 'all' || card.dataset.category === category) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });

                // 筛选陪练场景
                const sceneCategoryMap = {
                    'all': 'all',
                    'reception': 'reception',
                    'presentation': 'presentation',
                    'objection': 'objection',
                    'closing': 'closing'
                };
                const sceneCategory = sceneCategoryMap[category] || 'all';
                document.querySelectorAll('.scene-card').forEach(card => {
                    if (sceneCategory === 'all' || card.dataset.category === sceneCategory) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });

        // ==================== Sheet控制 ====================
        function openSheet(sheetId) {
            document.getElementById('sheet-overlay').classList.add('open');
            document.getElementById(sheetId).classList.add('open');
            document.body.classList.add('modal-open');
        }

        function closeAllSheets() {
            document.getElementById('sheet-overlay').classList.remove('open');
            document.querySelectorAll('.sheet').forEach(sheet => {
                sheet.classList.remove('open');
            });
            document.body.classList.remove('modal-open');
        }

        // ==================== 课程详情 ====================
        function openCourseDetail(courseId) {
            openSheet('course-detail-sheet');
        }

        function startLearning() {
            closeAllSheets();
            document.getElementById('video-page').classList.remove('hidden');
            document.body.classList.add('modal-open');
        }

        // ==================== 视频页 ====================
        function closeVideo() {
            document.getElementById('video-page').classList.add('hidden');
            document.body.classList.remove('modal-open');
        }

        function enterQuiz() {
            document.getElementById('video-page').classList.add('hidden');
            document.getElementById('quiz-page').classList.remove('hidden');
        }

        // ==================== 答题页 ====================
        function showQuizPage() {
            document.getElementById('quiz-page').classList.remove('hidden');
            document.body.classList.add('modal-open');
        }

        function closeQuiz() {
            document.getElementById('quiz-page').classList.add('hidden');
            document.body.classList.remove('modal-open');
        }

        function submitAnswer() {
            const selected = document.querySelector('input[name="answer"]:checked');
            if (!selected) {
                alert('请选择答案');
                return;
            }
            document.getElementById('quiz-page').classList.add('hidden');
            openSheet('quiz-result-sheet');
        }

        // ==================== AI陪练 ====================
        let currentScene = '';

        function startPractice(scene) {
            currentScene = scene;
            const titles = {
                'first-visit': '初次进店客户',
                'online-consult': '线上咨询客户',
                'kitchen-plan': '厨房方案讲解',
                'wardrobe-plan': '衣柜方案讲解',
                'price-objection': '价格异议处理',
                'brand-objection': '品牌异议处理',
                'quality-objection': '质量顾虑处理',
                'price-closing': '报价签约',
                'hesitate-closing': '犹豫客户逼单',
                'family-closing': '全家决策客户'
            };
            document.getElementById('chat-title').textContent = titles[scene] || 'AI陪练';
            document.getElementById('chat-interface').classList.remove('hidden');
            document.body.classList.add('modal-open');

            // 清空消息，添加开场白
            const messagesContainer = document.getElementById('chat-messages');
            const openingLines = {
                'first-visit': '你好，我是第一次来你们店，想了解一下定制家具。',
                'online-consult': '你好，我在网上看到你们的产品，想咨询一下定制流程。',
                'kitchen-plan': '你好，想听听你对我家厨房设计方案的讲解。',
                'wardrobe-plan': '你好，想了解一下主卧衣柜的设计方案。',
                'price-objection': '你好，我看了你们的报价，感觉有点贵啊。',
                'brand-objection': '你好，我之前没听过你们品牌，质量有保障吗？',
                'quality-objection': '你好，你们用的是什么板材？环保吗？',
                'price-closing': '你好，方案我挺满意的，现在报价是多少？',
                'hesitate-closing': '你好，方案我觉得还行，我再考虑考虑。',
                'family-closing': '你好，我和我爱人一起来的，想听听你们的建议。'
            };
            messagesContainer.innerHTML = `
                <div class="flex gap-3">
                    <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-robot text-green-600 dark:text-green-400"></i>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-2xl rounded-tl-sm px-4 py-3 max-w-[75%] shadow-sm">
                        <p class="text-sm">${openingLines[scene] || '你好，我想咨询一下定制家具。'}</p>
                    </div>
                </div>
            `;
        }

        function closePractice() {
            document.getElementById('chat-interface').classList.add('hidden');
            document.body.classList.remove('modal-open');
        }

        function endPractice() {
            document.getElementById('chat-interface').classList.add('hidden');
            openSheet('score-report-sheet');
        }

        function sendMessage() {
            const input = document.getElementById('chat-input');
            const message = input.value.trim();
            if (!message) return;

            // 添加用户消息
            addUserMessage(message);
            input.value = '';

            // 显示思考动画
            showThinking();

            // 模拟AI回复
            setTimeout(() => {
                removeThinking();
                addAIMessage('我理解您的顾虑。让我为您详细说明一下我们产品的价值所在...');
            }, 2000);
        }

        function sendQuickReply(message) {
            addUserMessage(message);
            showThinking();
            setTimeout(() => {
                removeThinking();
                addAIMessage('您说得很对，不过我还想再考虑一下其他方面...');
            }, 2000);
        }

        function addUserMessage(message) {
            const container = document.getElementById('chat-messages');
            container.innerHTML += `
                <div class="flex gap-3 justify-end">
                    <div class="bg-green-500 text-white rounded-2xl rounded-tr-sm px-4 py-3 max-w-[75%] shadow-sm">
                        <p class="text-sm">${message}</p>
                    </div>
                    <div class="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-user text-white"></i>
                    </div>
                </div>
            `;
            container.scrollTop = container.scrollHeight;
        }

        function addAIMessage(message) {
            const container = document.getElementById('chat-messages');
            container.innerHTML += `
                <div class="flex gap-3">
                    <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-robot text-green-600 dark:text-green-400"></i>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-2xl rounded-tl-sm px-4 py-3 max-w-[75%] shadow-sm">
                        <p class="text-sm">${message}</p>
                    </div>
                </div>
            `;
            container.scrollTop = container.scrollHeight;
        }

        function showThinking() {
            const container = document.getElementById('chat-messages');
            container.innerHTML += `
                <div id="thinking-indicator" class="flex gap-3">
                    <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-robot text-green-600"></i>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
                        <div class="flex items-center gap-2">
                            <span class="text-sm text-gray-500">AI正在思考</span>
                            <div class="flex gap-1">
                                <span class="w-2 h-2 bg-green-500 rounded-full thinking-dot"></span>
                                <span class="w-2 h-2 bg-green-500 rounded-full thinking-dot"></span>
                                <span class="w-2 h-2 bg-green-500 rounded-full thinking-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            container.scrollTop = container.scrollHeight;
        }

        function removeThinking() {
            const thinking = document.getElementById('thinking-indicator');
            if (thinking) thinking.remove();
        }

        function handleEnter(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        }

        // ==================== 主题切换 ====================
        function toggleTheme() {
            const html = document.documentElement;
            if (html.classList.contains('dark')) {
                html.classList.remove('dark');
                html.classList.add('light');
            } else {
                html.classList.remove('light');
                html.classList.add('dark');
            }
            
            // 重新绘制图表以适配新主题
            drawRadarChart();
        }

        // ==================== 雷达图 ====================
        function drawRadarChart() {
            const canvas = document.getElementById('radarChart');
            if (!canvas) return;

            const ctx = canvas.getContext('2d');
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const radius = 70;
            const isDark = document.documentElement.classList.contains('dark');

            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 数据
            const labels = ['产品知识', '沟通技巧', '异议处理', '成交能力', '服务意识'];
            const values = [85, 78, 82, 75, 88];
            const maxValue = 100;

            // 绘制网格
            ctx.strokeStyle = isDark ? '#4b5563' : '#e5e7eb';
            ctx.lineWidth = 1;

            for (let i = 1; i <= 5; i++) {
                ctx.beginPath();
                for (let j = 0; j < 5; j++) {
                    const angle = (Math.PI * 2 / 5) * j - Math.PI / 2;
                    const r = (radius / 5) * i;
                    const x = centerX + r * Math.cos(angle);
                    const y = centerY + r * Math.sin(angle);
                    if (j === 0) ctx.moveTo(x, y);
                    else ctx.lineTo(x, y);
                }
                ctx.closePath();
                ctx.stroke();
            }

            // 绘制轴线
            for (let i = 0; i < 5; i++) {
                const angle = (Math.PI * 2 / 5) * i - Math.PI / 2;
                const x = centerX + radius * Math.cos(angle);
                const y = centerY + radius * Math.sin(angle);
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(x, y);
                ctx.stroke();

                // 绘制标签
                const labelX = centerX + (radius + 20) * Math.cos(angle);
                const labelY = centerY + (radius + 20) * Math.sin(angle);
                ctx.fillStyle = isDark ? '#9ca3af' : '#6b7280';
                ctx.font = '12px sans-serif';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(labels[i], labelX, labelY);
            }

            // 绘制数据区域
            ctx.beginPath();
            for (let i = 0; i < 5; i++) {
                const angle = (Math.PI * 2 / 5) * i - Math.PI / 2;
                const r = (values[i] / maxValue) * radius;
                const x = centerX + r * Math.cos(angle);
                const y = centerY + r * Math.sin(angle);
                if (i === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }
            ctx.closePath();
            ctx.fillStyle = isDark ? 'rgba(34, 197, 94, 0.3)' : 'rgba(22, 163, 74, 0.2)';
            ctx.fill();
            ctx.strokeStyle = isDark ? '#22c55e' : '#16a34a';
            ctx.lineWidth = 2;
            ctx.stroke();

            // 绘制数据点
            for (let i = 0; i < 5; i++) {
                const angle = (Math.PI * 2 / 5) * i - Math.PI / 2;
                const r = (values[i] / maxValue) * radius;
                const x = centerX + r * Math.cos(angle);
                const y = centerY + r * Math.sin(angle);
                ctx.beginPath();
                ctx.arc(x, y, 4, 0, Math.PI * 2);
                ctx.fillStyle = isDark ? '#22c55e' : '#16a34a';
                ctx.fill();
            }
        }

        // ==================== AI知识问答 ====================
        let isQASending = false;

        function toggleSidebar() {
            const sidebar = document.getElementById('qa-sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            sidebar.classList.toggle('-translate-x-full');
            overlay.classList.toggle('hidden');
            
            if (overlay.classList.contains('hidden')) {
                document.body.classList.remove('modal-open');
            } else {
                document.body.classList.add('modal-open');
            }
        }

        function selectHistory(question) {
            const input = document.getElementById('qa-input');
            input.value = question;
            toggleSidebar();
            sendQAQuestion();
        }

        function sendQAQuestion(presetQuestion) {
            const input = document.getElementById('qa-input');
            const sendBtn = document.getElementById('qa-send-btn');
            
            if (isQASending) return;
            
            const question = presetQuestion || input.value.trim();
            if (!question) return;

            // 如果是新对话的第一个问题，创建历史记录
            if (currentConversationId === null) {
                const newId = Date.now();
                conversationHistory.unshift({ 
                    id: newId, 
                    firstQuestion: question, 
                    messages: [] 
                });
                currentConversationId = newId;
                renderHistoryList();
            }

            // 禁用发送按钮
            isQASending = true;
            sendBtn.disabled = true;
            sendBtn.classList.remove('bg-gradient-to-br', 'from-green-500', 'to-green-600');
            sendBtn.classList.add('bg-gray-400');

            addQAMessage(question, 'user');
            if (!presetQuestion) input.value = '';

            setTimeout(() => {
                showQAThinking();
                
                setTimeout(() => {
                    removeQAThinking();
                    const answer = getQAAnswer(question);
                    addQAMessage(answer, 'ai');
                    
                    // 保存当前对话的消息到历史记录
                    if (currentConversationId !== null) {
                        const currentConv = conversationHistory.find(c => c.id === currentConversationId);
                        if (currentConv) {
                            currentConv.messages = [...qaMessages];
                        }
                    }
                    
                    // 重新启用发送按钮
                    isQASending = false;
                    sendBtn.disabled = false;
                    sendBtn.classList.remove('bg-gray-400');
                    sendBtn.classList.add('bg-gradient-to-br', 'from-green-500', 'to-green-600');
                }, 1000);
            }, 300);
        }

        function getQAAnswer(question) {
            const q = question.toLowerCase();

            if (q.includes('spin') || q.includes('spIN提问')) {
                return 'SPIN提问法是一种系统的需求挖掘技巧，包含四个阶段：\n\n• <span class="text-green-600 font-medium">S-Situation 情境问题</span>：了解客户现状\n如"您现在住的房子是什么情况？"\n\n• <span class="text-green-600 font-medium">P-Problem 问题问题</span>：挖掘客户痛点\n如"现在的厨房使用起来有什么不方便吗？"\n\n• <span class="text-green-600 font-medium">I-Implication 暗示问题</span>：放大痛点影响\n如"收纳不够确实会影响生活品质"\n\n• <span class="text-green-600 font-medium">N-Need-Payoff 需求确认</span>：确认解决方案\n如"所以您最希望解决的是收纳问题，对吗？"';
            }

            if (q.includes('价格异议') || q.includes('太贵')) {
                return '处理价格异议的核心是价值传递：\n\n1. <span class="text-green-600">认同感受</span>："我理解价格是您关心的问题"\n\n2. <span class="text-green-600">价值分解</span>："我们采用E0级环保板材，五金质保10年"\n\n3. <span class="text-green-600">长期成本</span>："使用寿命更长，年均成本更低"\n\n4. <span class="text-green-600">对比优势</span>："性价比更高"\n\n记住：不要急于降价，先让客户认可价值！';
            }

            if (q.includes('板材') || q.includes('材质')) {
                return '常见板材类型及特点：\n\n• <span class="text-green-600">实木板</span>：天然环保，质感好，但价格高，易变形\n\n• <span class="text-green-600">颗粒板</span>：性价比高，稳定性好，适合柜体\n\n• <span class="text-green-600">多层板</span>：强度高，防水性好，适合潮湿环境\n\n• <span class="text-green-600">环保等级</span>：ENF > E0 > E1，数字越小越环保\n\n推荐话术："我们全部采用ENF级环保板材，给您和家人更安心的居住环境。"';
            }

            if (q.includes('成交信号') || q.includes('逼单')) {
                return '识别成交信号和逼单技巧：\n\n<span class="text-green-600">成交信号</span>\n• 语言信号：询问细节、确认时间、询问付款方式\n• 行为信号：反复看方案、计算价格、身体前倾\n• 表情信号：点头、微笑、放松\n\n<span class="text-green-600">逼单技巧</span>\n• 假设成交法："那我们是今天签约还是明天？"\n• 限时优惠法："本周签约可享受XX优惠"\n• 案例见证法："同小区的王先生也是选的这款"\n• 损失规避法："这个优惠名额只剩2个了"';
            }

            if (q.includes('竞品') || q.includes('对比')) {
                return '竞品对比应对话术：\n\n1. <span class="text-green-600">先认同后引导</span>\n"XX品牌确实不错，市场知名度很高"\n"不过选择定制家具，除了品牌，还要看..."\n\n2. <span class="text-green-600">差异化对比</span>\n• 板材对比（环保等级、品牌）\n• 五金对比（品牌、功能、质保年限）\n• 工艺对比（封边、安装细节）\n• 设计对比（个性化程度、专业性）\n• 服务对比（售后、质保、响应速度）\n\n3. <span class="text-green-600">价值强化</span>：强调性价比优势，突出差异化价值';
            }

            if (q.includes('客户类型')) {
                return '五类客户类型及应对策略：\n\n• <span class="text-green-600">刚需型</span>：关注基础功能、性价比\n→ 强调实用性，讲清楚材料品质\n\n• <span class="text-green-600">改善型</span>：关注痛点解决、空间优化\n→ 挖掘痛点，展示解决方案\n\n• <span class="text-green-600">高端型</span>：关注品牌、设计、品质\n→ 展示案例，强调服务\n\n• <span class="text-green-600">强势型</span>：专业对等或尊重认可\n→ 准备好专业知识，尊重客户意见\n\n• <span class="text-green-600">复合型</span>：协调多方需求\n→ 逐一满足，确认最终决策人';
            }

            return '感谢您的提问！关于这个问题，我可以给您一些建议：\n\n1. 建议您先明确客户的核心需求\n2. 参考学习中心的对应课程\n3. 多使用AI陪练进行实战演练\n\n如果您有其他具体问题，欢迎继续问我~';
        }

        // 虚拟滚动实现
        let qaMessages = [];
        let conversationHistory = []; // 历史对话记录
        let currentConversationId = null; // 当前选中的对话ID
        const ITEM_HEIGHT_ESTIMATE = 100; // 估算每条消息高度
        const BUFFER_SIZE = 5; // 缓冲区大小

        function initQAMessages() {
            // 初始化一些示例历史记录（带示例消息）
            if (conversationHistory.length === 0) {
                conversationHistory = [
                    { 
                        id: 1, 
                        firstQuestion: 'SPIN提问法是什么', 
                        messages: [
                            { id: 1, content: 'SPIN提问法是什么', type: 'user' },
                            { id: 2, content: 'SPIN提问法是一种系统的需求挖掘技巧，包含四个阶段：\n\n• S-Situation 情境问题：了解客户现状\n• P-Problem 问题问题：挖掘客户痛点\n• I-Implication 暗示问题：放大痛点影响\n• N-Need-Payoff 需求确认：确认解决方案', type: 'ai' }
                        ]
                    },
                    { 
                        id: 2, 
                        firstQuestion: '如何处理价格异议', 
                        messages: [
                            { id: 1, content: '如何处理价格异议', type: 'user' },
                            { id: 2, content: '处理价格异议的核心是价值传递：\n\n1. 认同感受\n2. 价值分解\n3. 长期成本\n4. 对比优势', type: 'ai' }
                        ]
                    },
                    { 
                        id: 3, 
                        firstQuestion: '板材知识有哪些', 
                        messages: [
                            { id: 1, content: '板材知识有哪些', type: 'user' },
                            { id: 2, content: '常见板材类型及特点：\n\n• 实木板：天然环保，质感好\n• 颗粒板：性价比高，稳定性好\n• 多层板：强度高，防水性好', type: 'ai' }
                        ]
                    },
                    { 
                        id: 4, 
                        firstQuestion: '成交信号识别', 
                        messages: [
                            { id: 1, content: '成交信号识别', type: 'user' },
                            { id: 2, content: '识别成交信号和逼单技巧：\n\n成交信号：\n• 语言信号：询问细节、确认时间\n• 行为信号：反复看方案、计算价格', type: 'ai' }
                        ]
                    },
                    { 
                        id: 5, 
                        firstQuestion: '竞品对比话术', 
                        messages: [
                            { id: 1, content: '竞品对比话术', type: 'user' },
                            { id: 2, content: '竞品对比应对话术：\n\n1. 先认同后引导\n2. 差异化对比\n3. 价值强化', type: 'ai' }
                        ]
                    },
                    { 
                        id: 6, 
                        firstQuestion: '客户类型分析', 
                        messages: [
                            { id: 1, content: '客户类型分析', type: 'user' },
                            { id: 2, content: '五类客户类型及应对策略：\n\n• 刚需型：关注基础功能、性价比\n• 改善型：关注痛点解决、空间优化\n• 高端型：关注品牌、设计、品质', type: 'ai' }
                        ]
                    },
                    { 
                        id: 7, 
                        firstQuestion: '逼单技巧有哪些', 
                        messages: [
                            { id: 1, content: '逼单技巧有哪些', type: 'user' },
                            { id: 2, content: '逼单技巧：\n\n• 假设成交法\n• 限时优惠法\n• 案例见证法\n• 损失规避法', type: 'ai' }
                        ]
                    }
                ];
            }
            
            qaMessages = [{
                id: Date.now(),
                content: '你好！我是你的AI知识助手。有什么销售问题可以随时问我~',
                type: 'ai'
            }];
            renderQAMessages();
            renderHistoryList();
        }

        // 文字截断函数：前8个字符+省略号
        function truncateText(text, maxLength = 8) {
            if (!text) return '';
            text = text.trim();
            if (text.length <= maxLength) return text;
            return text.substring(0, maxLength) + '...';
        }

        // 渲染历史记录列表
        function renderHistoryList() {
            const container = document.getElementById('history-list');
            if (!container) return;
            
            container.innerHTML = conversationHistory.map(item => {
                const isSelected = item.id === currentConversationId;
                return `
                    <div class="history-item px-4 py-3 rounded-xl cursor-pointer transition-all active:scale-[0.98]
                        ${isSelected 
                            ? 'bg-green-100 dark:bg-green-900/30 border-2 border-green-500' 
                            : 'bg-gray-100 dark:bg-[#252d3d] border-2 border-transparent hover:bg-gray-200 dark:hover:bg-[#2f3a4a]'}"
                        onclick="selectHistoryItem(${item.id})">
                        <p class="text-sm ${isSelected ? 'text-green-700 dark:text-green-300 font-medium' : 'text-gray-900 dark:text-gray-200'}">
                            ${truncateText(item.firstQuestion)}
                        </p>
                    </div>
                `;
            }).join('');
        }

        // 选择历史记录项
        function selectHistoryItem(id) {
            // 先保存当前对话的消息
            if (currentConversationId !== null) {
                const currentConv = conversationHistory.find(c => c.id === currentConversationId);
                if (currentConv) {
                    currentConv.messages = [...qaMessages];
                }
            }
            
            // 切换到新的对话
            currentConversationId = id;
            const targetConv = conversationHistory.find(c => c.id === id);
            if (targetConv && targetConv.messages.length > 0) {
                qaMessages = [...targetConv.messages];
            } else {
                // 如果没有消息，显示初始问候
                qaMessages = [{
                    id: Date.now(),
                    content: '你好！我是你的AI知识助手。有什么销售问题可以随时问我~',
                    type: 'ai'
                }];
            }
            
            renderQAMessages();
            renderHistoryList();
            toggleSidebar();
            
            // 滚动到底部
            setTimeout(() => {
                const container = document.getElementById('qa-messages');
                if (container) {
                    container.scrollTop = container.scrollHeight;
                }
            }, 100);
        }

        function renderQAMessages() {
            const container = document.getElementById('qa-messages');
            if (!container) return;
            
            const thinkingEl = document.getElementById('qa-thinking');
            
            const containerHeight = container.clientHeight || 600;
            const visibleCount = Math.ceil(containerHeight / ITEM_HEIGHT_ESTIMATE) + BUFFER_SIZE * 2;
            const scrollTop = container.scrollTop;
            const startIndex = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT_ESTIMATE) - BUFFER_SIZE);
            const endIndex = Math.min(qaMessages.length, startIndex + visibleCount);
            
            let html = '';
            let currentHeight = 0;
            
            for (let i = 0; i < startIndex; i++) {
                currentHeight += ITEM_HEIGHT_ESTIMATE;
            }
            
            if (startIndex > 0) {
                html += `<div style="height: ${currentHeight}px;"></div>`;
            }
            
            for (let i = startIndex; i < endIndex; i++) {
                const msg = qaMessages[i];
                if (msg.type === 'user') {
                    html += `
                        <div class="flex gap-3 justify-end">
                            <div class="bg-[#00d68f] text-white rounded-2xl rounded-tr-sm px-4 py-3 max-w-[75%]">
                                <p class="text-sm">${msg.content}</p>
                            </div>
                            <div class="w-10 h-10 bg-gray-300 dark:bg-[#3b4559] rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-user text-white dark:text-gray-300"></i>
                            </div>
                        </div>
                    `;
                } else {
                    html += `
                        <div class="flex gap-3">
                            <div class="w-10 h-10 bg-[#00d68f] rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-robot text-white text-sm"></i>
                            </div>
                            <div class="bg-gray-100 dark:bg-[#252d3d] rounded-2xl rounded-tl-sm px-4 py-3 max-w-[75%]">
                                <p class="text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap">${msg.content}</p>
                            </div>
                        </div>
                    `;
                }
            }
            
            const remainingHeight = (qaMessages.length - endIndex) * ITEM_HEIGHT_ESTIMATE;
            if (remainingHeight > 0) {
                html += `<div style="height: ${remainingHeight}px;"></div>`;
            }
            
            container.innerHTML = html;
            
            if (thinkingEl) {
                container.appendChild(thinkingEl);
            }
        }

        function addQAMessage(content, type) {
            qaMessages.push({
                id: Date.now(),
                content,
                type
            });
            renderQAMessages();
            const container = document.getElementById('qa-messages');
            if (container) {
                setTimeout(() => {
                    container.scrollTop = container.scrollHeight;
                }, 0);
            }
        }

        function showQAThinking() {
            const container = document.getElementById('qa-messages');
            if (!container) return;
            
            const thinkingEl = document.createElement('div');
            thinkingEl.id = 'qa-thinking';
            thinkingEl.className = 'flex gap-3';
            thinkingEl.innerHTML = `
                <div class="w-11 h-11 bg-gradient-to-br from-[#00d68f] to-[#00b377] rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-robot text-white text-sm"></i>
                </div>
                <div class="bg-gray-100 dark:bg-[#252d3d] rounded-2xl rounded-tl-sm px-5 py-3.5">
                    <div class="flex items-center gap-3">
                        <div class="flex gap-2">
                            <span class="w-2 h-2 bg-[#00d68f] rounded-full animate-bounce" style="animation-delay: 0s"></span>
                            <span class="w-2 h-2 bg-[#00d68f] rounded-full animate-bounce" style="animation-delay: 0.15s"></span>
                            <span class="w-2 h-2 bg-[#00d68f] rounded-full animate-bounce" style="animation-delay: 0.3s"></span>
                        </div>
                    </div>
                </div>
            `;
            container.appendChild(thinkingEl);
            setTimeout(() => {
                container.scrollTop = container.scrollHeight;
            }, 50);
        }

        function removeQAThinking() {
            const thinking = document.getElementById('qa-thinking');
            if (thinking) thinking.remove();
        }

        // 新建对话
        function newConversation() {
            // 清空输入框
            document.getElementById('qa-input').value = '';
            // 重置发送按钮状态
            isQASending = false;
            const sendBtn = document.getElementById('qa-send-btn');
            sendBtn.disabled = false;
            sendBtn.classList.remove('bg-gray-400');
            sendBtn.classList.add('bg-gradient-to-br', 'from-green-500', 'to-green-600');
            // 重新初始化消息
            currentConversationId = null;
            initQAMessages();
        }

        // 显示清除对话确认模态框
        function confirmClearConversation() {
            document.getElementById('clear-conversation-modal').classList.remove('hidden');
            document.body.classList.add('modal-open');
        }

        // 关闭清除对话确认模态框
        function closeClearModal() {
            document.getElementById('clear-conversation-modal').classList.add('hidden');
            document.body.classList.remove('modal-open');
        }

        // 清除当前对话并新建
        function clearCurrentConversation() {
            closeClearModal();
            newConversation();
        }

        // ==================== 登录注册功能 ====================
        let isLoggedIn = false;

        function openLoginSheet() {
            document.getElementById('login-sheet').classList.add('open');
            document.body.classList.add('modal-open');
            loadSavedCredentials();
        }

        function closeLoginSheet() {
            document.getElementById('login-sheet').classList.remove('open');
            document.body.classList.remove('modal-open');
        }

        function switchLoginReg(tab) {
            const loginTabBtn = document.getElementById('login-tab-btn');
            const regTabBtn = document.getElementById('reg-tab-btn');
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');

            if (tab === 'login') {
                loginTabBtn.classList.add('bg-white', 'dark:bg-gray-600', 'text-green-600', 'dark:text-green-400', 'shadow-sm');
                loginTabBtn.classList.remove('text-gray-600', 'dark:text-gray-300');
                regTabBtn.classList.remove('bg-white', 'dark:bg-gray-600', 'text-green-600', 'dark:text-green-400', 'shadow-sm');
                regTabBtn.classList.add('text-gray-600', 'dark:text-gray-300');
                loginForm.classList.remove('hidden');
                registerForm.classList.add('hidden');
            } else {
                regTabBtn.classList.add('bg-white', 'dark:bg-gray-600', 'text-green-600', 'dark:text-green-400', 'shadow-sm');
                regTabBtn.classList.remove('text-gray-600', 'dark:text-gray-300');
                loginTabBtn.classList.remove('bg-white', 'dark:bg-gray-600', 'text-green-600', 'dark:text-green-400', 'shadow-sm');
                loginTabBtn.classList.add('text-gray-600', 'dark:text-gray-300');
                registerForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
            }
        }

        function togglePassword(inputId, btn) {
            const input = document.getElementById(inputId);
            const icon = btn.querySelector('i');
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }

        function validatePhone(phone) {
            return /^1[3-9]\d{9}$/.test(phone);
        }

        function handleLogin() {
            const phone = document.getElementById('login-phone').value.trim();
            const password = document.getElementById('login-password').value;
            const rememberMe = document.getElementById('remember-me').checked;

            if (!phone) {
                alert('请输入手机号');
                return;
            }
            if (!validatePhone(phone)) {
                alert('请输入正确的手机号');
                return;
            }
            if (!password) {
                alert('请输入密码');
                return;
            }

            if (rememberMe) {
                localStorage.setItem('savedPhone', phone);
                localStorage.setItem('savedPassword', password);
            } else {
                localStorage.removeItem('savedPhone');
                localStorage.removeItem('savedPassword');
            }

            isLoggedIn = true;
            closeLoginSheet();
            updateUserUI();
        }

        function handleRegister() {
            const phone = document.getElementById('reg-phone').value.trim();
            const code = document.getElementById('reg-code').value.trim();
            const password = document.getElementById('reg-password').value;
            const confirmPassword = document.getElementById('reg-confirm-password').value;
            const agreeTerms = document.getElementById('agree-terms').checked;

            if (!phone) {
                alert('请输入手机号');
                return;
            }
            if (!validatePhone(phone)) {
                alert('请输入正确的手机号');
                return;
            }
            if (!code || code.length !== 6) {
                alert('请输入6位验证码');
                return;
            }
            if (!password || password.length < 6 || password.length > 20) {
                alert('密码长度为6-20位');
                return;
            }
            if (password !== confirmPassword) {
                alert('两次密码输入不一致');
                return;
            }
            if (!agreeTerms) {
                alert('请阅读并同意用户协议和隐私政策');
                return;
            }

            alert('注册成功！');
            switchLoginReg('login');
            document.getElementById('login-phone').value = phone;
        }

        let countdown = 0;
        let countdownTimer = null;

        function sendVerifyCode() {
            const phone = document.getElementById('reg-phone').value.trim();
            const btn = document.getElementById('send-code-btn');

            if (!phone) {
                alert('请输入手机号');
                return;
            }
            if (!validatePhone(phone)) {
                alert('请输入正确的手机号');
                return;
            }

            if (countdown > 0) return;

            countdown = 60;
            btn.textContent = `${countdown}秒后重发`;
            btn.disabled = true;

            countdownTimer = setInterval(() => {
                countdown--;
                if (countdown <= 0) {
                    clearInterval(countdownTimer);
                    btn.textContent = '获取验证码';
                    btn.disabled = false;
                } else {
                    btn.textContent = `${countdown}秒后重发`;
                }
            }, 1000);

            alert('验证码已发送');
        }

        function loadSavedCredentials() {
            const savedPhone = localStorage.getItem('savedPhone');
            const savedPassword = localStorage.getItem('savedPassword');
            if (savedPhone) {
                document.getElementById('login-phone').value = savedPhone;
                document.getElementById('remember-me').checked = true;
            }
            if (savedPassword) {
                document.getElementById('login-password').value = savedPassword;
            }
        }

        function updateUserUI() {
            const profileTab = document.getElementById('tab-profile');
            if (isLoggedIn) {
                // 用户已登录，显示用户信息
            }
        }

        function handleLogout() {
            isLoggedIn = false;
            localStorage.removeItem('savedPhone');
            localStorage.removeItem('savedPassword');
            openLoginSheet();
        }

        // ==================== 初始化 ====================
        document.addEventListener('DOMContentLoaded', function() {
            // 检查系统主题偏好
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                document.documentElement.classList.add('dark');
            }
            
            // 初始化问答消息
            initQAMessages();
        });
    </script>
</body>
</html>