@import url("https://fonts.googleapis.com/css2?family=Madimi+One&family=Figtree:wght@400;500;600;700&display=swap");:root{--primary:#4F46E5;--bg-white:#FFFFFF;--bg-gray:#F9FAFB;--border:#E5E7EB;--buddy-bg:#EEF2FF;--user-bg:#F3F4F6;--text-primary:#000000;--text-secondary:#666666;--space-8:8px;--space-16:16px;--space-24:24px;--space-32:32px;--space-48:48px;--font-heading:"Madimi One",sans-serif;--font-body:"Figtree",sans-serif;--sidebar-width:240px;--input-height:48px;--border-radius:12px;--border-radius-sm:8px}@keyframes slideInFromRight{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}*{box-sizing:border-box}body{margin:0;font-family:var(--font-body);overflow-x:hidden}.study-book-new,body{background:var(--bg-white)}.study-book-new{min-height:100vh;position:relative}.navbar{top:0;left:0;right:0;height:60px;background-color:#F8F8F5;align-items:center;justify-content:space-between;padding:0 40px;z-index:100;box-shadow:0 2px 4px rgba(0,0,0,.1)}.navbar,.sidebar{position:fixed;display:flex}.sidebar{top:calc(80px + 15vh);left:20px;width:200px;background:#F4F3FF;border-radius:16px;z-index:90;flex-direction:column;box-shadow:0 4px 0 rgba(0,0,0,.1);padding:16px;gap:8px}.sidebar-header{padding:var(--space-24);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.sidebar-header h3{font-family:var(--font-heading);font-size:18px;margin:0;color:var(--text-primary)}.close-sidebar{background:none;border:none;font-size:24px;cursor:pointer;padding:0;color:var(--text-secondary)}.close-sidebar:hover{color:var(--text-primary)}.sidebar-nav{display:flex;flex-direction:column;gap:8px;width:100%}.nav-item{background:#FAF9FF;border:1px solid #e5e5e5;border-radius:8px;padding:12px;text-align:left;font-family:Madimi One,cursive;font-size:13px;font-weight:400;color:#333333;cursor:pointer;transition:all .2s ease;position:relative}.nav-item:hover{background:#F0EFFF;border-color:#C4C4FF}.nav-item.active{background:#E5E3FF;color:#4338CA;border-color:#4338CA}.sidebar-toggle{position:fixed;top:80px;left:20px;z-index:50;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--border-radius-sm);padding:var(--space-8);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.1);color:var(--text-secondary)}.sidebar-toggle:hover{background:var(--bg-gray);color:var(--text-primary)}.main-content-area{padding:var(--space-24);padding-top:80px;background:var(--bg-white)}.loading-container,.main-content-area{margin-top:60px;min-height:calc(100vh - 60px)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent}.loading-spinner{width:48px;height:48px;border-top:4px solid var(--border);border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--space-16)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.materials-page{padding:0}.materials-layout{display:grid;grid-template-columns:35% 65%;gap:var(--space-32);max-width:1200px;margin:0 auto 0 240px;padding-right:var(--space-24)}.categories-panel{background:var(--bg-white);padding:var(--space-32);border-radius:var(--border-radius);box-shadow:0 2px 4px rgba(0,0,0,.1)}.categories-panel h2{font-family:var(--font-heading);font-size:24px;letter-spacing:.04em;color:var(--text-primary);margin:0 0 var(--space-24) 0}.categories-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-16);margin-bottom:var(--space-32)}.category-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-12);padding:var(--space-20);border:1px solid var(--border);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;background:var(--bg-white);min-height:120px;justify-content:center}.category-item:hover{background:var(--bg-gray);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}.category-item img{width:32px;height:32px;margin-bottom:var(--space-8)}.category-item span{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text-primary);line-height:1.2}.category-item .count{font-size:12px;color:var(--text-secondary);background:var(--bg-gray);padding:2px var(--space-8);border-radius:10px;min-width:20px;text-align:center;margin-top:var(--space-4)}.add-material-btn{width:100%;padding:var(--space-16);background:#E7E6FF;color:#4338CA;border:1px solid #d1d5db;border-radius:var(--border-radius-sm);font-family:var(--font-body);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-material-btn:hover{background:#DDD6FE;border-color:#4338CA}.materials-grid{background:var(--bg-white);padding:var(--space-32);border-radius:var(--border-radius);box-shadow:0 2px 4px rgba(0,0,0,.1)}.materials-grid h2{font-family:var(--font-heading);font-size:24px;letter-spacing:.04em;color:var(--text-primary);margin:0 0 var(--space-24) 0}.materials-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-24)}.material-card{border:1px solid var(--border);border-radius:var(--border-radius);padding:var(--space-24);transition:all .2s ease}.material-card:hover{box-shadow:0 4px 8px rgba(0,0,0,.1);transform:translateY(-2px)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-16)}.card-header img{width:32px;height:32px}.card-actions{display:flex;gap:var(--space-8)}.card-actions button{padding:4px var(--space-8);background:none;border:1px solid var(--border);border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.card-actions button:hover{background:var(--bg-gray)}.material-card h3{font-family:var(--font-heading);font-size:18px;letter-spacing:.04em;color:var(--text-primary);margin:0 0 var(--space-8) 0}.material-card p{font-family:var(--font-body);font-size:14px;color:var(--text-secondary);margin:0 0 var(--space-16) 0}.file-indicator{font-size:12px;color:var(--text-secondary);background:var(--bg-gray);padding:4px var(--space-8);border-radius:4px;display:inline-block}.empty-state{grid-column:1/-1;text-align:center;padding:var(--space-48);color:var(--text-secondary)}.chat-page{padding:0;height:calc(100vh - 120px);position:relative}.chat-container{width:calc(90% - 240px);max-width:1080px;margin-left:240px;margin-right:auto;padding:0 40px;height:100%;display:flex;flex-direction:column;position:relative}.messages-area{flex:1;overflow-y:auto;padding:var(--space-24);padding-bottom:120px}.welcome-message{text-align:center;padding:var(--space-48);color:var(--text-secondary)}.welcome-message h2{font-family:var(--font-heading);font-size:32px;color:var(--text-primary);margin:0 0 var(--space-16) 0}.message{margin-bottom:var(--space-24);width:100%}.message-content{font-family:var(--font-body);font-size:16px;line-height:1.6;width:100%}.message.user .message-content{background:#f4f4f4;padding:var(--space-16);border-radius:var(--border-radius);color:var(--text-primary)}.message.assistant .message-content{background:transparent;color:var(--text-primary);padding:0}.message-time{font-size:12px;color:var(--text-secondary);margin-top:var(--space-8)}.chat-input-fixed{position:fixed;bottom:0;left:240px;right:0;width:calc(90% - 240px);max-width:1080px;background:var(--bg-white);border-top:1px solid var(--border);padding:var(--space-24) 40px;z-index:100;box-shadow:0 -2px 10px rgba(0,0,0,.1)}.input-container{display:flex;gap:var(--space-16);align-items:flex-end}.input-container textarea{flex:1;resize:none;border:1px solid #00ced1;border-radius:var(--border-radius-sm);padding:var(--space-16);font-family:var(--font-body);font-size:16px;line-height:1.5;min-height:var(--input-height);background:#D3F6F7}.input-container textarea:focus{outline:none;border-color:#00CED1;box-shadow:0 0 0 2px rgba(0,206,209,.2)}.send-btn{padding:var(--space-16) var(--space-24);background:#B3F0F2;color:#000000;border:1px solid #00ced1;border-radius:var(--border-radius-sm);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;height:fit-content;min-width:120px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.send-btn:hover:not(:disabled){background:#9AEBED;border-color:#00B8C1}.send-btn:disabled{opacity:.5;cursor:not-allowed}.ask-teacher-btn{padding:var(--space-16) var(--space-24);background:#B3F0F2;color:#000000;border:1px solid #00ced1;border-radius:var(--border-radius-sm);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:120px;box-shadow:0 2px 4px rgba(0,0,0,.1);height:fit-content;margin-bottom:var(--space-8)}.ask-teacher-btn:hover{background:#9AEBED;border-color:#00B8C1}.button-group{display:flex;flex-direction:column;gap:var(--space-8)}.drafts-page{padding:0}.drafts-container{max-width:1200px;margin:0 auto 0 240px;padding:var(--space-32)}.drafts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--space-24);margin-top:var(--space-32)}.draft-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--border-radius);padding:var(--space-24);box-shadow:0 2px 4px rgba(0,0,0,.1);transition:all .2s ease}.draft-card:hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-2px)}.draft-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-16)}.draft-header h3{font-family:var(--font-heading);font-size:18px;margin:0;color:var(--text-primary)}.draft-date{font-family:var(--font-body);font-size:12px;color:var(--text-secondary)}.draft-preview{margin-bottom:var(--space-16)}.draft-preview p{font-size:14px;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.draft-preview p,.draft-stats{font-family:var(--font-body);color:var(--text-secondary)}.draft-stats{display:flex;justify-content:space-between;margin-bottom:var(--space-16);font-size:12px}.draft-actions{display:flex;gap:var(--space-8)}.delete-btn,.edit-btn{padding:8px 16px;border:1px solid var(--border);border-radius:var(--border-radius-sm);font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.edit-btn{background:#E7E6FF;color:#4338CA;border-color:#4338CA}.edit-btn:hover{background:#DDD6FE}.delete-btn{background:#FEE2E2;color:#DC2626;border-color:#DC2626}.delete-btn:hover{background:#FECACA}.new-draft-card{background:var(--bg-gray);border:2px dashed var(--border);border-radius:var(--border-radius);padding:var(--space-48);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.new-draft-card:hover{background:#F3F4F6;border-color:var(--primary)}.new-draft-content{text-align:center}.plus-icon{font-size:48px;color:var(--text-secondary);margin-bottom:var(--space-16)}.new-draft-content h3{font-family:var(--font-heading);font-size:18px;margin:0 0 var(--space-8) 0;color:var(--text-primary)}.new-draft-content p{font-family:var(--font-body);font-size:14px;margin:0;color:var(--text-secondary)}.draft-popout-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center}.draft-popout{background:var(--bg-white);border-radius:var(--border-radius);box-shadow:0 10px 25px rgba(0,0,0,.15);width:90%;max-width:600px;max-height:80vh;overflow:hidden;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.draft-popout-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-16) var(--space-24);border-bottom:1px solid var(--border);background:#F4F3FF}.draft-popout-content{padding:var(--space-24)}.draft-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-16);padding-bottom:var(--space-8);border-bottom:1px solid #f0f0f0}.draft-actions-row{display:flex;gap:var(--space-12);margin-top:var(--space-16);justify-content:flex-end}.modal{box-shadow:0 4px 8px rgba(0,0,0,.2)!important}.modal,.modal select{border-radius:0!important}.modal select{background:#DFF8F9;border:1px solid #00ced1;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding:10px 40px 10px 12px;width:100%;box-sizing:border-box;font-family:"'Figtree', sans-serif";font-size:14px}.modal select:focus{outline:none;border-color:#00B8C1;box-shadow:0 0 0 2px rgba(0,206,209,.2)}.modal select option{background:#DFF8F9;color:#000000;padding:8px 12px}.modal select option:checked{background:#95EAEC;color:#000000}.modal select::-webkit-scrollbar{width:8px}.modal select::-webkit-scrollbar-track{background:#DFF8F9}.modal select::-webkit-scrollbar-thumb{background:#95EAEC;border-radius:4px}.modal select::-webkit-scrollbar-thumb:hover{background:#7DE3E6}.modal button,.modal input,.modal textarea{border-radius:0!important}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--bg-white);border-radius:var(--border-radius);max-width:600px;width:90%;max-height:80vh;overflow-y:auto}.modal-header{padding:var(--space-24);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-family:var(--font-heading);font-size:20px;margin:0;color:var(--text-primary)}.modal-header button{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-secondary)}.modal-header button:hover{color:var(--text-primary)}.modal-content{padding:var(--space-24)}.form-group{margin-bottom:var(--space-24)}.form-group label{display:block;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-8)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:var(--space-16);border:1px solid var(--border);border-radius:var(--border-radius-sm);font-family:var(--font-body);font-size:16px}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary)}.form-actions{display:flex;gap:var(--space-16);justify-content:flex-end;margin-top:var(--space-24)}.form-actions button{padding:var(--space-16) var(--space-24);border:1px solid var(--border);border-radius:var(--border-radius-sm);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.form-actions button.primary{background:var(--primary);color:white;border-color:var(--primary)}.form-actions button.primary:hover{background:#4338CA}.form-actions button:not(.primary){background:var(--bg-white);color:var(--text-primary)}.form-actions button:not(.primary):hover{background:var(--bg-gray)}.floating-draft-button{position:fixed;bottom:20px;right:20px;z-index:1000;background:#F4F3FF;border:2px solid #e5e3ff;border-radius:50%;width:60px;height:60px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.15)}.floating-draft-button:hover{background:#E5E3FF;border-color:#4338CA;transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,.2)}.floating-draft-button img{width:32px;height:32px;filter:opacity(.8)}.floating-draft-button:hover img{filter:opacity(1)}@media (max-width:1024px){.sidebar{width:180px;top:calc(80px + 12vh);left:15px;padding:14px}.nav-item{padding:10px;font-size:12px}.materials-layout{margin-left:200px;gap:var(--space-24)}.chat-container{width:calc(88% - 200px);margin-left:200px;padding:0 30px}.chat-input-fixed{left:200px;width:calc(88% - 200px);padding:var(--space-20) 30px}.categories-list{grid-template-columns:repeat(2,1fr);gap:var(--space-12)}}@media (max-width:768px){.navbar{padding:0 20px}.sidebar{position:fixed;top:60px;left:0;width:100%;max-width:300px;height:calc(100vh - 60px);transform:translateX(-100%);transition:transform .3s ease;z-index:200}.sidebar.open{transform:translateX(0)}.sidebar-toggle{display:block;top:70px;left:15px}.materials-layout{grid-template-columns:1fr;margin-left:0;padding:0 var(--space-16);gap:var(--space-20)}.categories-panel,.materials-grid{padding:var(--space-24)}.categories-list{grid-template-columns:repeat(2,1fr);gap:var(--space-12)}.category-item{min-height:100px;padding:var(--space-16)}.materials-cards{grid-template-columns:1fr;gap:var(--space-16)}.chat-container{width:100%;max-width:100%;margin-left:0;padding:0 20px}.chat-input-fixed{left:0;width:100%;padding:var(--space-16) 20px}.input-container textarea{font-size:15px}.ask-teacher-btn,.send-btn{min-width:100px;padding:var(--space-12) var(--space-20);font-size:13px}.drafts-container{margin-left:0;padding:var(--space-24) var(--space-16)}.drafts-grid{grid-template-columns:1fr;gap:var(--space-16)}.floating-draft-button{width:50px;height:50px;bottom:15px;right:15px}.floating-draft-button img{width:28px;height:28px}}@media (max-width:480px){.navbar{padding:0 15px}.sidebar{max-width:280px}.nav-item{padding:10px;font-size:12px}.materials-layout{padding:0 var(--space-12)}.categories-panel h2,.materials-grid h2{font-size:20px;margin-bottom:var(--space-16)}.categories-list{grid-template-columns:1fr;gap:var(--space-12)}.category-item{min-height:90px;padding:var(--space-12)}.category-item span{font-size:13px}.add-material-btn{padding:var(--space-12);font-size:15px}.material-card{padding:var(--space-16)}.material-card h3{font-size:16px}.material-card p{font-size:13px}.chat-container{padding:0 15px}.welcome-message h2{font-size:26px}.message-content{font-size:15px}.chat-input-fixed{padding:var(--space-12) 15px}.input-container{gap:var(--space-12)}.input-container textarea{font-size:14px;padding:var(--space-12);min-height:42px}.ask-teacher-btn,.send-btn{min-width:90px;padding:var(--space-12) var(--space-16);font-size:12px}.drafts-container{padding:var(--space-20) var(--space-12)}.drafts-container h2{font-size:22px}.draft-card{padding:var(--space-16)}.draft-header h3{font-size:16px}.draft-preview p{font-size:13px}.modal{width:95%;max-height:90vh}.modal-header{padding:var(--space-16)}.modal-header h3{font-size:18px}.modal-content{padding:var(--space-16)}.form-group label{font-size:13px}.form-group input,.form-group select,.form-group textarea{padding:var(--space-12);font-size:15px}.floating-draft-button{width:45px;height:45px}.floating-draft-button img{width:24px;height:24px}}@media (max-width:375px){.sidebar{max-width:260px}.categories-panel,.materials-grid{padding:var(--space-16)}.categories-panel h2,.materials-grid h2{font-size:18px}.category-item{min-height:85px;padding:var(--space-10)}.category-item span{font-size:12px}.welcome-message h2{font-size:22px}.message-content{font-size:14px}.ask-teacher-btn,.send-btn{min-width:80px;font-size:11px}}