debug: fix chatbox not floated

resources/css/app.css

@@ -331,7 +331,7 @@ @layer components {
     }
 
     .welcome-theme-toggle {
-        @apply absolute right-4 top-4 h-10 w-10 rounded-[10px] shadow-none backdrop-blur sm:right-8 sm:top-8;
+        @apply absolute top-4 right-4 h-10 w-10 rounded-[10px] shadow-none backdrop-blur sm:top-8 sm:right-8;
         background-color: var(--welcome-toggle-bg);
         border-color: var(--welcome-card-active-border);
         color: var(--welcome-accent);
@@ -344,7 +344,7 @@ @layer components {
     }
 
     .welcome-title {
-        @apply text-center text-[34px] font-bold leading-tight tracking-[0.01em] sm:text-[40px];
+        @apply text-center text-[34px] leading-tight font-bold tracking-[0.01em] sm:text-[40px];
         color: var(--welcome-title);
     }
 
@@ -394,7 +394,7 @@ @layer components {
     }
 
     .welcome-entry-title {
-        @apply truncate text-left text-lg font-semibold leading-tight;
+        @apply truncate text-left text-lg leading-tight font-semibold;
         color: var(--welcome-title);
     }
 
@@ -414,7 +414,7 @@ @layer components {
     }
 
     .welcome-register-link {
-        @apply font-medium underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2;
+        @apply font-medium underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:outline-none;
         color: var(--welcome-accent);
         --tw-ring-color: color-mix(
             in oklab,
@@ -463,7 +463,7 @@ @layer components {
     }
 
     .register-back-link {
-        @apply inline-flex text-sm font-semibold underline-offset-4 transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2;
+        @apply inline-flex text-sm font-semibold underline-offset-4 transition-colors hover:underline focus-visible:ring-2 focus-visible:outline-none;
         color: var(--welcome-subtitle);
         --tw-ring-color: color-mix(
             in oklab,
@@ -473,7 +473,7 @@ @layer components {
     }
 
     .register-heading {
-        @apply mt-2 text-center text-2xl font-semibold leading-tight;
+        @apply mt-2 text-center text-2xl leading-tight font-semibold;
         color: var(--welcome-title);
     }
 
@@ -486,7 +486,7 @@ @layer components {
     }
 
     .register-label {
-        @apply text-base font-medium leading-none;
+        @apply text-base leading-none font-medium;
         color: var(--welcome-title);
     }
 
@@ -521,7 +521,7 @@ @layer components {
     }
 
     .register-error {
-        @apply text-sm font-medium leading-snug;
+        @apply text-sm leading-snug font-medium;
         color: var(--register-danger);
     }
 
@@ -561,7 +561,7 @@ @layer components {
     }
 
     .login-remember-label {
-        @apply text-sm font-normal leading-none;
+        @apply text-sm leading-none font-normal;
         color: var(--welcome-subtitle);
     }
 
@@ -611,7 +611,7 @@ @layer components {
     }
 
     .student-logo-action {
-        @apply flex size-8 shrink-0 items-center justify-center rounded-[8px] outline-none transition-transform focus-visible:ring-2;
+        @apply flex size-8 shrink-0 items-center justify-center rounded-[8px] transition-transform outline-none focus-visible:ring-2;
         --tw-ring-color: color-mix(
             in oklab,
             var(--student-primary) 45%,
@@ -702,7 +702,7 @@ @layer components {
     }
 
     .student-history-delete {
-        @apply absolute right-2 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center rounded-[6px] opacity-0 transition-opacity;
+        @apply absolute top-1/2 right-2 flex size-6 -translate-y-1/2 items-center justify-center rounded-[6px] opacity-0 transition-opacity;
         color: var(--student-danger);
     }
 
@@ -795,7 +795,7 @@ @layer components {
     }
 
     .student-history-title {
-        @apply block truncate text-[11px] font-medium leading-tight;
+        @apply block truncate text-[11px] leading-tight font-medium;
         color: var(--student-text);
     }
 
@@ -830,7 +830,7 @@ @layer components {
     }
 
     .student-user-name {
-        @apply block truncate text-[11px] font-semibold leading-tight;
+        @apply block truncate text-[11px] leading-tight font-semibold;
         color: var(--student-text);
     }
 
@@ -946,7 +946,7 @@ @layer components {
     }
 
     .student-greeting h2 {
-        @apply text-3xl font-bold leading-tight tracking-[-0.02em];
+        @apply text-3xl leading-tight font-bold tracking-[-0.02em];
         color: var(--student-text);
     }
 
@@ -1019,17 +1019,18 @@ @layer components {
     }
 
     .student-floating-send {
-        @apply absolute bottom-4 right-5 size-8 rounded-[8px] shadow-none;
+        @apply absolute right-5 bottom-4 size-8 rounded-[8px] shadow-none;
         background-color: var(--student-primary) !important;
         color: var(--student-primary-foreground) !important;
     }
 
     .student-chat-stage--session {
-        @apply min-h-0 flex-col items-stretch justify-between overflow-hidden px-5 py-0;
+        @apply relative min-h-0 flex-col items-stretch justify-between overflow-hidden px-0 py-0;
     }
 
     .student-chat-thread {
-        @apply min-h-0 w-full flex-1 overflow-y-auto overscroll-contain py-8;
+        @apply min-h-0 w-full flex-1 overflow-y-auto overscroll-contain px-5 pt-8;
+        padding-bottom: 12.5rem;
     }
 
     .student-chat-messages {
@@ -1042,7 +1043,7 @@ @layer components {
     }
 
     .student-chat-status {
-        @apply mb-4 mt-0;
+        @apply mt-0 mb-4;
     }
 
     .student-message {
@@ -1085,7 +1086,7 @@ @layer components {
     }
 
     .student-message-content {
-        @apply whitespace-pre-wrap leading-relaxed;
+        @apply leading-relaxed whitespace-pre-wrap;
     }
 
     .student-message-time {
@@ -1112,12 +1113,23 @@ @layer components {
         color: var(--student-muted);
     }
 
+    .student-chat-scroll-anchor {
+        scroll-margin-bottom: 13.5rem;
+    }
+
     .student-chat-composer {
-        @apply w-full shrink-0 pb-8;
+        @apply pointer-events-none absolute right-5 bottom-8 left-5 z-10 w-auto pb-0;
     }
 
     .student-composer-card--dock {
-        @apply w-full;
+        @apply pointer-events-auto w-full;
+        -webkit-backdrop-filter: blur(18px) saturate(1.25);
+        backdrop-filter: blur(18px) saturate(1.25);
+        background-color: color-mix(
+            in oklab,
+            var(--student-surface) 76%,
+            transparent
+        ) !important;
     }
 
     .student-composer-card--dock .student-composer-content {
@@ -1249,7 +1261,7 @@ @layer components {
     }
 
     .lecturer-user-name {
-        @apply block truncate text-[11px] font-semibold leading-tight;
+        @apply block truncate text-[11px] leading-tight font-semibold;
         color: var(--lecturer-text);
     }
 
@@ -1323,7 +1335,7 @@ @layer components {
     }
 
     .lecturer-page-header h1 {
-        @apply text-3xl font-bold leading-tight tracking-[-0.03em];
+        @apply text-3xl leading-tight font-bold tracking-[-0.03em];
         color: var(--lecturer-text);
     }
 
@@ -1382,7 +1394,7 @@ @layer components {
 
     .lecturer-form-input,
     .lecturer-form-textarea {
-        @apply w-full rounded-[8px] border px-4 text-sm shadow-none outline-none transition-[border-color,box-shadow];
+        @apply w-full rounded-[8px] border px-4 text-sm shadow-none transition-[border-color,box-shadow] outline-none;
         background-color: color-mix(
             in oklab,
             var(--lecturer-primary) 6%,
@@ -1460,7 +1472,7 @@ @layer components {
     }
 
     .lecturer-metric-value-row strong {
-        @apply text-3xl font-bold leading-none;
+        @apply text-3xl leading-none font-bold;
         color: var(--lecturer-text);
     }
 
@@ -1502,13 +1514,13 @@ @layer components {
     }
 
     .lecturer-search-field svg {
-        @apply pointer-events-none absolute left-3 top-1/2 -translate-y-1/2;
+        @apply pointer-events-none absolute top-1/2 left-3 -translate-y-1/2;
         color: var(--lecturer-muted);
         z-index: 1;
     }
 
     .lecturer-search-input {
-        @apply h-10 rounded-[9px] border text-sm shadow-none outline-none transition-[border-color,box-shadow];
+        @apply h-10 rounded-[9px] border text-sm shadow-none transition-[border-color,box-shadow] outline-none;
         background-color: color-mix(
             in oklab,
             var(--lecturer-primary) 5%,
@@ -1598,7 +1610,7 @@ @layer components {
     }
 
     .lecturer-manage-button {
-        @apply inline-flex items-center justify-center gap-1 rounded-[7px] px-3 py-1.5 text-sm font-semibold outline-none transition-colors focus-visible:ring-2;
+        @apply inline-flex items-center justify-center gap-1 rounded-[7px] px-3 py-1.5 text-sm font-semibold transition-colors outline-none focus-visible:ring-2;
         background-color: color-mix(
             in oklab,
             var(--lecturer-primary) 10%,
@@ -1633,7 +1645,7 @@ @layer components {
     }
 
     .lecturer-detail-back {
-        @apply mt-1 inline-flex size-9 shrink-0 items-center justify-center rounded-full outline-none transition-colors focus-visible:ring-2;
+        @apply mt-1 inline-flex size-9 shrink-0 items-center justify-center rounded-full transition-colors outline-none focus-visible:ring-2;
         color: var(--lecturer-muted);
         --tw-ring-color: color-mix(
             in oklab,
@@ -1656,12 +1668,12 @@ @layer components {
     }
 
     .lecturer-detail-title-row h1 {
-        @apply text-3xl font-bold leading-tight tracking-[-0.03em];
+        @apply text-3xl leading-tight font-bold tracking-[-0.03em];
         color: var(--lecturer-text);
     }
 
     .lecturer-detail-heading p {
-        @apply mt-1 text-base italic leading-relaxed;
+        @apply mt-1 text-base leading-relaxed italic;
         color: var(--lecturer-muted);
     }
 
@@ -1734,7 +1746,7 @@ @layer components {
     }
 
     .lecturer-upload-card {
-        @apply flex min-h-[185px] w-full flex-col items-center justify-center gap-3 rounded-[14px] border border-dashed px-6 py-8 text-center outline-none transition-colors focus-visible:ring-2;
+        @apply flex min-h-[185px] w-full flex-col items-center justify-center gap-3 rounded-[14px] border border-dashed px-6 py-8 text-center transition-colors outline-none focus-visible:ring-2;
         background-color: color-mix(
             in oklab,
             var(--lecturer-primary) 6%,
@@ -1877,7 +1889,7 @@ @layer components {
     }
 
     .lecturer-document-delete {
-        @apply inline-flex size-8 items-center justify-center rounded-[7px] outline-none transition-colors focus-visible:ring-2;
+        @apply inline-flex size-8 items-center justify-center rounded-[7px] transition-colors outline-none focus-visible:ring-2;
         color: var(--lecturer-muted);
         --tw-ring-color: color-mix(
             in oklab,
@@ -1904,7 +1916,16 @@ @layer components {
 
     @media (max-width: 640px) {
         .student-chat-stage--session {
+            @apply px-0;
+        }
+
+        .student-chat-thread {
             @apply px-3;
+            padding-bottom: 11rem;
+        }
+
+        .student-chat-scroll-anchor {
+            scroll-margin-bottom: 12rem;
         }
 
         .student-message-bubble {
@@ -1912,7 +1933,7 @@ @layer components {
         }
 
         .student-chat-composer {
-            @apply pb-4;
+            @apply right-3 bottom-4 left-3 pb-0;
         }
 
         .lecturer-page {

resources/js/pages/mahasiswa-chat.tsx

@@ -155,7 +155,13 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
     }, [courses, currentSession, selectedCourseId]);
 
     useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ block: 'end' });
+        const scrollFrame = window.requestAnimationFrame(() => {
+            messagesEndRef.current?.scrollIntoView({
+                block: 'end',
+            });
+        });
+
+        return () => window.cancelAnimationFrame(scrollFrame);
     }, [messages, isProcessing]);
 
     const getHistoryMessages = useCallback(
@@ -471,7 +477,10 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
                                     </article>
                                 )}
 
-                                <div ref={messagesEndRef} />
+                                <div
+                                    className="student-chat-scroll-anchor"
+                                    ref={messagesEndRef}
+                                />
                             </div>
                         )}
                     </section>