improvement: toast component created and used every where in the app.

frontend/src/components/ui/treatment/TreatmentWorkspace.tsx

@@ -8,6 +8,7 @@ import { Checkbox } from '@/components/ui/common/Checkbox';
 import { Button } from '@/components/ui/common/Button';
 import { Dropdown } from '@/components/ui/common/Dropdown';
 import { SearchBar } from '@/components/ui/common/SearchBar';
+import { Toast } from '@/components/ui/common/Toast';
 import { isSameLocalCalendarDay, startOfLocalDay } from '@/lib/appointmentTime';
 import {
   fetchLinkedOrganizations,
@@ -325,7 +326,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   }
 
   return (
-    <div className="space-y-6">
+    <div className="relative space-y-6 pb-24">
       <header className="space-y-1">
         <h1 className="text-2xl font-semibold text-text-primary">Treatment</h1>
         <p className="text-sm text-text-secondary">
@@ -345,12 +346,6 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
         loading={apptsLoading}
       />
 
-      {banner && (
-        <div className="rounded-[var(--radius-md)] border border-primary/40 bg-primary-soft px-4 py-2 text-sm text-text-primary">
-          {banner}
-        </div>
-      )}
-
       <div className="grid grid-cols-1 xl:grid-cols-[minmax(280px,380px)_minmax(0,1fr)] gap-6 items-start">
         <div className="space-y-4">
           {selectedAppointment ? (
@@ -651,6 +646,14 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
           </div>
         </div>
       </div>
+
+      {banner && (
+        <div className="fixed bottom-4 left-0 right-0 z-[70] px-4 pointer-events-none">
+          <div className="pointer-events-auto w-full">
+            <Toast variant="success">{banner}</Toast>
+          </div>
+        </div>
+      )}
     </div>
   );
 }