:root{--color-bg: #F8F9FC;--color-bg-white: #FFFFFF;--color-bg-sidebar: #F1F3F8;--color-bg-hover: #E8EBF2;--color-bg-active: #DBE0ED;--color-border: #E2E5EE;--color-border-light: #EEF0F5;--color-text-primary: #1A1D26;--color-text-secondary: #6B7083;--color-text-tertiary: #9BA0B3;--color-text-placeholder: #B4B9CC;--color-accent: #4F6EF7;--color-accent-hover: #3D5CE5;--color-accent-light: #EEF1FE;--color-accent-glow: rgba(79, 110, 247, .15);--color-sent-bubble: #4F6EF7;--color-sent-text: #FFFFFF;--color-received-bubble: #F1F3F8;--color-received-text: #1A1D26;--color-success: #34C759;--color-danger: #FF3B30;--color-warning: #FF9500;--color-physics: #4F6EF7;--color-chemistry: #34C759;--color-maths: #FF9500;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .6875rem;--font-size-sm: .75rem;--font-size-base: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.375rem;--font-size-2xl: 1.75rem;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04);--shadow-focus: 0 0 0 3px var(--color-accent-glow);--transition-fast: .12s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--transition-spring: .4s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.app-container{display:flex;height:100vh;width:100vw;overflow:hidden;background:var(--color-bg)}.sidebar{width:280px;min-width:280px;height:100%;background:var(--color-bg-sidebar);border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:var(--space-xl) var(--space-lg);border-bottom:1px solid var(--color-border-light);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#f1f3f8d9;position:sticky;top:0;z-index:10}.sidebar-title{font-size:var(--font-size-lg);font-weight:700;color:var(--color-text-primary);letter-spacing:-.02em;display:flex;align-items:center;gap:var(--space-sm)}.sidebar-title-icon{font-size:var(--font-size-xl)}.sidebar-subtitle{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:var(--space-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.sidebar-subjects{padding:var(--space-md) var(--space-sm);flex:1;overflow-y:auto}.subject-group{margin-bottom:var(--space-md)}.subject-label{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition-fast);-webkit-user-select:none;user-select:none}.subject-label:hover{background:var(--color-bg-hover)}.subject-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.subject-dot.physics{background:var(--color-physics)}.subject-dot.chemistry{background:var(--color-chemistry)}.subject-dot.maths{background:var(--color-maths)}.subject-count{margin-left:auto;font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-weight:500}.subject-chevron{font-size:var(--font-size-xs);color:var(--color-text-tertiary);transition:transform var(--transition-base)}.subject-chevron.open{transform:rotate(90deg)}.notes-list{padding-left:var(--space-xl);overflow:hidden;animation:slideDown var(--transition-base) ease}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.note-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-item:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.note-item.active{background:var(--color-accent-light);color:var(--color-accent);font-weight:500}.note-item-icon{font-size:var(--font-size-sm);flex-shrink:0;opacity:.6}.note-item-title{overflow:hidden;text-overflow:ellipsis}.note-item-delete{margin-left:auto;opacity:0;color:var(--color-danger);cursor:pointer;font-size:var(--font-size-sm);transition:opacity var(--transition-fast);flex-shrink:0;padding:2px;border-radius:var(--radius-sm)}.note-item:hover .note-item-delete{opacity:.6}.note-item-delete:hover{opacity:1!important;background:#ff3b301a}.sidebar-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border-light)}.new-note-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-lg);background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.new-note-btn:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.new-note-btn:active{transform:translateY(0)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--color-bg-white)}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-2xl);border-bottom:1px solid var(--color-border-light);min-height:60px}.editor-subject-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.editor-subject-badge.physics{background:#4f6ef71a;color:var(--color-physics)}.editor-subject-badge.chemistry{background:#34c7591a;color:var(--color-chemistry)}.editor-subject-badge.maths{background:#ff95001a;color:var(--color-maths)}.save-indicator{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-xs);color:var(--color-text-tertiary);transition:all var(--transition-base)}.save-indicator.saving{color:var(--color-warning)}.save-indicator.saved{color:var(--color-success)}.save-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.5s ease infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.save-indicator.saved .save-dot{animation:none}.editor-body{flex:1;display:flex;flex-direction:column;padding:var(--space-2xl);overflow-y:auto}.editor-title-input{font-family:var(--font-family);font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-primary);border:none;outline:none;background:transparent;width:100%;letter-spacing:-.02em;line-height:1.3;margin-bottom:var(--space-lg)}.editor-title-input::placeholder{color:var(--color-text-placeholder)}.editor-content-textarea{font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-text-primary);border:none;outline:none;background:transparent;width:100%;flex:1;resize:none;line-height:1.75}.editor-content-textarea::placeholder{color:var(--color-text-placeholder)}.subject-selector{position:relative;display:inline-block}.subject-selector-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);font-family:var(--font-family);font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.subject-selector-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.subject-dropdown{position:absolute;top:calc(100% + 4px);left:0;background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-xs);z-index:100;min-width:140px;animation:fadeInScale var(--transition-base) ease}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.subject-dropdown-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.subject-dropdown-item:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--color-text-tertiary);gap:var(--space-lg)}.empty-state-icon{font-size:48px;opacity:.4}.empty-state-text{font-size:var(--font-size-md);font-weight:500}.empty-state-sub{font-size:var(--font-size-sm);color:var(--color-text-placeholder)}.chat-container{flex:1;display:flex;flex-direction:column;height:100%;background:var(--color-bg-white);animation:fadeIn var(--transition-slow) ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.chat-header{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--color-border-light);background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);min-height:64px}.chat-back-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:var(--color-bg);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-md)}.chat-back-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.chat-user-info{display:flex;flex-direction:column}.chat-user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),#8B5CF6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:var(--font-size-sm);flex-shrink:0}.chat-user-name{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary)}.chat-user-status{font-size:var(--font-size-xs);display:flex;align-items:center;gap:var(--space-xs)}.chat-user-status.online{color:var(--color-success)}.chat-user-status.offline{color:var(--color-text-tertiary)}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.status-dot.online{animation:pulse 2s ease infinite}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm)}.message-row{display:flex;animation:messageSlideIn var(--transition-spring) ease}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.message-row.sent{justify-content:flex-end}.message-row.received{justify-content:flex-start}.message-bubble{max-width:70%;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-lg);font-size:var(--font-size-base);line-height:1.5;position:relative;word-wrap:break-word}.message-bubble.sent{background:var(--color-sent-bubble);color:var(--color-sent-text);border-bottom-right-radius:var(--space-xs)}.message-bubble.received{background:var(--color-received-bubble);color:var(--color-received-text);border-bottom-left-radius:var(--space-xs)}.message-time{font-size:var(--font-size-xs);margin-top:var(--space-xs);opacity:.6}.message-bubble.sent .message-time{text-align:right;color:#ffffffb3}.message-bubble.received .message-time{color:var(--color-text-tertiary)}.message-media{border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--space-xs);max-width:300px}.message-media img{width:100%;height:auto;display:block;border-radius:var(--radius-md)}.message-media video{width:100%;max-height:300px;display:block;border-radius:var(--radius-md)}.typing-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-sm);color:var(--color-text-tertiary);animation:fadeIn var(--transition-base) ease}.typing-dots{display:flex;gap:3px}.typing-dot{width:5px;height:5px;border-radius:50%;background:var(--color-text-tertiary);animation:typingBounce 1.4s ease infinite}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.chat-input-area{display:flex;align-items:flex-end;gap:var(--space-sm);padding:var(--space-lg) var(--space-xl);border-top:1px solid var(--color-border-light);background:var(--color-bg-white)}.chat-attach-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;background:var(--color-bg);border-radius:50%;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-md);flex-shrink:0}.chat-attach-btn:hover{background:var(--color-accent-light);color:var(--color-accent)}.chat-text-input{flex:1;padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-xl);font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-bg);outline:none;resize:none;max-height:120px;min-height:38px;line-height:1.5;transition:border-color var(--transition-fast)}.chat-text-input:focus{border-color:var(--color-accent);box-shadow:var(--shadow-focus)}.chat-text-input::placeholder{color:var(--color-text-placeholder)}.chat-send-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;background:var(--color-accent);border-radius:50%;color:#fff;cursor:pointer;transition:all var(--transition-base);font-size:var(--font-size-md);flex-shrink:0}.chat-send-btn:hover{background:var(--color-accent-hover);transform:scale(1.05)}.chat-send-btn:active{transform:scale(.95)}.chat-send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.hidden-file-input{display:none}.date-separator{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-lg) 0}.date-separator-line{flex:1;height:1px;background:var(--color-border-light)}.date-separator-text{font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-weight:500;white-space:nowrap}.media-upload-preview{padding:var(--space-sm) var(--space-xl);border-top:1px solid var(--color-border-light);background:var(--color-bg);display:flex;align-items:center;gap:var(--space-md);animation:slideUp var(--transition-base) ease}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.media-upload-thumb{width:48px;height:48px;border-radius:var(--radius-sm);object-fit:cover}.media-upload-info{flex:1;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.media-upload-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:#ff3b301a;border-radius:50%;color:var(--color-danger);cursor:pointer;font-size:var(--font-size-sm);transition:all var(--transition-fast)}.media-upload-remove:hover{background:#ff3b3033}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.message-status{font-size:11px;margin-left:4px;display:inline-flex;align-items:center;color:#ffffffb3}.message-bubble.received .message-status{color:var(--color-text-tertiary)}.message-status.seen{color:#34c759}.reactions-container{position:absolute;bottom:-10px;right:10px;display:flex;gap:2px;background:#fff;border-radius:12px;padding:2px 6px;box-shadow:0 2px 5px #0000001a;font-size:12px;z-index:2;color:#000}.message-bubble.received .reactions-container{right:auto;left:10px}.reaction-emoji{cursor:pointer}.message-actions{position:absolute;top:50%;transform:translateY(-50%);display:none;gap:8px;background:#fff;padding:6px 10px;border-radius:8px;box-shadow:var(--shadow-sm);z-index:10}.message-row:hover .message-actions{display:flex}.message-row.sent .message-actions{left:-80px}.message-row.received .message-actions{right:-80px}.action-btn{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;font-size:14px}.action-btn:hover{color:var(--color-accent)}.action-btn.delete:hover{color:var(--color-danger)}.audio-player{display:flex;align-items:center;gap:10px;min-width:200px}.audio-play-btn{background:none;border:none;color:inherit;font-size:24px;cursor:pointer}.message-caption{margin-top:4px;font-size:13px}.edited-tag{font-size:10px;opacity:.6;margin-left:5px;font-style:italic}.recording-indicator{display:flex;align-items:center;gap:10px;color:var(--color-danger);flex:1;padding:0 10px;animation:pulse 2s infinite}.recording-dot{width:10px;height:10px;background:var(--color-danger);border-radius:50%}.chat-record-btn{background:none;border:none;font-size:20px;color:var(--color-text-secondary);cursor:pointer;padding:8px;border-radius:50%;transition:all .2s}.chat-record-btn:hover{background:var(--color-bg-hover);color:var(--color-danger)}.chat-record-btn.recording{color:var(--color-danger);background:#ff3b301a}.lightbox-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;z-index:1000;display:flex;align-items:center;justify-content:center}.lightbox-img{max-width:90%;max-height:90%;border-radius:8px;-webkit-user-select:none;user-select:none;pointer-events:none}.lightbox-close{position:absolute;top:20px;right:20px;background:#fff3;border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer}@media (max-width: 768px){.sidebar{width:100%;min-width:100%;display:flex}.main-content,.chat-container{display:none;width:100%}.app-container.has-active-view .sidebar{display:none}.app-container.has-active-view .main-content,.app-container.has-active-view .chat-container{display:flex}.mobile-back-btn{display:flex!important;align-items:center;justify-content:center;background:var(--color-bg-sidebar);border:none;width:32px;height:32px;border-radius:8px;font-size:20px;cursor:pointer;color:var(--color-text-primary)}.editor-header{padding:var(--space-md) var(--space-lg)}.editor-body{padding:var(--space-lg)}.chat-header{padding:var(--space-md) var(--space-lg)}.chat-messages{padding:var(--space-md)}.chat-input-area{padding:var(--space-md);gap:var(--space-xs)}.message-bubble{max-width:85%}.message-actions{display:none!important}.message-row:active .message-actions{display:flex!important}}