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

frontend/src/app/(dashboard)/appointments/page.tsx

@@ -14,6 +14,7 @@ import { AppointmentScheduleGrid } from '@/components/ui/appointments/Appointmen
 import { AppointmentsPatientSearch } from '@/components/ui/appointments/AppointmentsPatientSearch';
 import { AppointmentScheduleLegend } from '@/components/ui/appointments/AppointmentScheduleLegend';
 import { ScheduleDayPicker } from '@/components/ui/common/ScheduleDayPicker';
+import { Toast } from '@/components/ui/common/Toast';
 import type { AppointmentPurpose } from '@/types/appointment';
 import { formatApiErrorMessage } from '@/lib/formatApiError';
 import { getLocalDayIsoRange, startOfLocalDay } from '@/lib/appointmentTime';
@@ -280,12 +281,6 @@ export default function AppointmentsPage() {
             )}
           </div>
 
-          {scheduleError && (
-            <div className="rounded-[var(--radius-sm)] border border-red-500/50 bg-red-500/10 px-3 py-2 text-sm text-red-300">
-              {scheduleError}
-            </div>
-          )}
-
           <AppointmentScheduleGrid
             day={scheduleDate}
             providers={providers}
@@ -323,24 +318,13 @@ export default function AppointmentsPage() {
         </div>
       )}
 
-      {(toastError || toastSuccess || toastInfo) && (
-        <div className="fixed bottom-4 left-4 right-4 z-[70] flex justify-center pointer-events-none">
-          <div className="pointer-events-auto w-full max-w-lg space-y-2">
-            {toastError && (
-              <div className="rounded-[var(--radius-sm)] border border-red-500/50 bg-red-500/10 px-3 py-2 text-sm text-red-300 shadow-lg">
-                {toastError}
-              </div>
-            )}
-            {toastInfo && (
-              <div className="rounded-[var(--radius-sm)] border border-amber-500/45 bg-amber-500/10 px-3 py-2 text-sm text-amber-100 shadow-lg">
-                {toastInfo}
-              </div>
-            )}
-            {toastSuccess && (
-              <div className="rounded-[var(--radius-sm)] border border-emerald-500/50 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-300 shadow-lg">
-                {toastSuccess}
-              </div>
-            )}
+      {(scheduleError || toastError || toastSuccess || toastInfo) && (
+        <div className="fixed bottom-4 left-0 right-0 z-[70] px-4 pointer-events-none">
+          <div className="pointer-events-auto w-full space-y-2">
+            {scheduleError && <Toast variant="danger">{scheduleError}</Toast>}
+            {toastError && <Toast variant="danger">{toastError}</Toast>}
+            {toastInfo && <Toast variant="warning">{toastInfo}</Toast>}
+            {toastSuccess && <Toast variant="success">{toastSuccess}</Toast>}
           </div>
         </div>
       )}

frontend/src/app/(dashboard)/settings/subscriptions/page.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { authApi } from '@/lib/api/auth';
 import { Button } from '@/components/ui/common/Button';
+import { Toast } from '@/components/ui/common/Toast';
 import type { SubscriptionAlertData } from '@/types/subscription';
 
 const PLAN_OPTIONS = [
@@ -69,7 +70,7 @@ export default function SubscriptionsSettingsPage() {
           : 'text-red-400';
 
   return (
-    <div className="space-y-6">
+    <div className="relative space-y-6 pb-24">
       <div>
         <Link
           href="/today"
@@ -189,13 +190,16 @@ export default function SubscriptionsSettingsPage() {
           >
             Start purchase process
           </Button>
-          {purchaseNotice && (
-            <div className="rounded-[var(--radius-md)] border border-emerald-500/30 bg-emerald-500/10 px-4 py-3">
-              <p className="text-sm text-emerald-200">{purchaseNotice}</p>
-            </div>
-          )}
         </div>
       </div>
+
+      {purchaseNotice && (
+        <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">{purchaseNotice}</Toast>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/components/ui/common/Toast.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { BadgeVariant } from '@/components/ui/common/Badge';
+
+interface ToastProps {
+  children: ReactNode;
+  variant?: BadgeVariant;
+  className?: string;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  success: 'bg-badge-success-bg text-badge-success-fg border-badge-success-border',
+  warning: 'bg-badge-warning-bg text-badge-warning-fg border-badge-warning-border',
+  danger: 'bg-badge-danger-bg text-badge-danger-fg border-badge-danger-border',
+  default: 'bg-badge-default-bg text-badge-default-fg border-badge-default-border',
+};
+
+export function Toast({ children, variant = 'default', className = '' }: ToastProps) {
+  return (
+    <div
+      role="status"
+      className={`w-full rounded-[var(--radius-md)] border px-4 py-3 text-sm shadow-lg ${variantStyles[variant]} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}

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>
   );
 }