::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #FFF8F0;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: #FFB6C8;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #FF9BB5;
        }

        .task-checkbox {
            appearance: none;
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            border: 3px solid #FFB6C8;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            flex-shrink: 0;
        }

        .task-checkbox:checked {
            background: linear-gradient(135deg, #98D098, #C1E1C1);
            border-color: #98D098;
        }

        .task-checkbox:checked::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }

        .task-checkbox:hover {
            transform: scale(1.1);
            box-shadow: 0 0 10px rgba(255, 182, 200, 0.5);
        }

        .task-completed .task-text {
            text-decoration: line-through;
            color: #B0B0B0;
        }

        .task-completed .task-desc {
            text-decoration: line-through;
            color: #C0C0C0;
        }

        .speech-bubble {
            position: relative;
            background: white;
            border-radius: 20px;
            padding: 12px 16px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .speech-bubble::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 30px;
            border-width: 10px 10px 0;
            border-style: solid;
            border-color: white transparent transparent;
        }

        .online-dot {
            width: 10px;
            height: 10px;
            background: #4ADE80;
            border-radius: 50%;
            display: inline-block;
            animation: pulse-soft 2s ease-in-out infinite;
        }

        .user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            color: white;
            flex-shrink: 0;
            overflow: hidden;
            border: 2px solid white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


        /* Category badges */
        .category-badge {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .category-code {
            background: #B8D4E3;
            color: #2563EB;
        }

        .category-design {
            background: #DDA0DD;
            color: #7C3AED;
        }

        .category-event {
            background: #FFDAB9;
            color: #EA580C;
        }

        .category-interact {
            background: #C1E1C1;
            color: #059669;
        }

        /* Overdue warning */
        .overdue-badge {
            background: #FFB3B3;
            color: #DC2626;
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 600;
            animation: pulse-soft 1s ease-in-out infinite;
        }

        /* Deadline badge */
        .deadline-badge {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .deadline-normal {
            background: #E6E6FA;
            color: #6B7280;
        }

        .deadline-soon {
            background: #FFF5BA;
            color: #D97706;
        }

        .deadline-overdue {
            background: #FFB3B3;
            color: #DC2626;
        }

        /* Modal styles */
        .modal-overlay {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(4px);
        }

        /* Markdown Content Styles */
        .markdown-content {
            line-height: 1.6;
            color: #374151;
        }

        .markdown-content h1 {
            font-size: 1.5em;
            font-weight: 800;
            margin-top: 0.5em;
            margin-bottom: 0.3em;
            color: #DB2777;
        }

        .markdown-content h2 {
            font-size: 1.3em;
            font-weight: 700;
            margin-top: 0.5em;
            margin-bottom: 0.3em;
            color: #BE185D;
        }

        .markdown-content h3 {
            font-size: 1.1em;
            font-weight: 700;
            margin-top: 0.5em;
            color: #9D174D;
        }

        .markdown-content p {
            margin-bottom: 0.5em;
        }

        .markdown-content ul {
            list-style-type: disc;
            padding-left: 1.5em;
            margin-bottom: 0.5em;
        }

        .markdown-content ol {
            list-style-type: decimal;
            padding-left: 1.5em;
            margin-bottom: 0.5em;
        }

        .markdown-content strong {
            font-weight: 700;
            color: #111827;
        }

        .markdown-content em {
            font-style: italic;
        }

        .markdown-content blockquote {
            border-left: 4px solid #FBCFE8;
            padding-left: 1em;
            color: #6B7280;
            font-style: italic;
        }

        .markdown-content code {
            background: #F3F4F6;
            padding: 0.2em 0.4em;
            border-radius: 4px;
            font-family: monospace;
            font-size: 0.9em;
            color: #DB2777;
        }

        .markdown-content pre {
            background: #1F2937;
            color: #F9FAFB;
            padding: 1em;
            border-radius: 0.5em;
            overflow-x: auto;
            margin-bottom: 0.8em;
        }

        .markdown-content pre code {
            background: transparent;
            color: inherit;
            padding: 0;
        }

        .markdown-content a {
            color: #DB2777;
        }

        /* Animated Mesh Gradient Background */
        body {
            background-color: #FFF5F7;
            /* Nền hồng phấn cực nhạt */
            background-image:
                radial-gradient(at 0% 0%, hsla(340, 100%, 88%, 0.8) 0px, transparent 55%),
                radial-gradient(at 50% 100%, hsla(140, 90%, 92%, 0.7) 0px, transparent 55%),
                radial-gradient(at 100% 0%, hsla(190, 100%, 90%, 0.7) 0px, transparent 55%),
                radial-gradient(at 0% 100%, hsla(260, 100%, 92%, 0.7) 0px, transparent 55%);
            background-attachment: fixed;
            background-size: 100% 100%;
        }