<div class="dashboard-wrapper">
  <!-- Header -->
  <header class="dashboard-header">
    <div class="header-content">
      <div class="header-left">
        <div class="logo-section">
          <svg class="medical-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2L2 7V10C2 16 6 21.4 12 22C18 21.4 22 16 22 10V7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 8V16M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <div class="header-text">
            <h1 class="dashboard-title">Doctor Dashboard</h1>
            <p class="dashboard-subtitle">Welcome, {{ currentUser?.firstName }} {{ currentUser?.lastName }}</p>
          </div>
        </div>
      </div>
      <div class="header-right">
        <!-- Notifications -->
        <div class="notification-container">
          <button class="notification-button" (click)="toggleNotifications()" [class.has-notifications]="notificationCount > 0" title="Notifications">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 8A6 6 0 0 0 6 8C6 9.65735 5.32843 11.2336 4.17157 12.4142C3.01472 13.5949 2 14.7712 2 16V17H22V16C22 14.7712 21.0147 13.5949 19.8579 12.4142C18.7011 11.2336 18 9.65735 18 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M9 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M10 3C10 2.44772 10.4477 2 11 2H13C13.5523 2 14 2.44772 14 3V4H10V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="notification-badge" *ngIf="notificationCount > 0">{{ notificationCount }}</span>
          </button>
          
          <!-- Notification Dropdown -->
          <div class="notification-dropdown" *ngIf="showNotifications">
            <div class="notification-header">
              <h3>Notifications</h3>
              <div class="header-actions">
                <button class="mark-all-read" *ngIf="notificationCount > 0" (click)="markAllNotificationsAsRead()">Mark all read</button>
                <button class="delete-all" *ngIf="notifications.length > 0" (click)="deleteAllNotifications()" title="Delete all notifications">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </button>
              </div>
            </div>
            <div class="notification-list">
              <div *ngIf="notifications.length === 0" class="no-notifications">
                <p>No notifications</p>
              </div>
              <div *ngFor="let notification of notifications" 
                   class="notification-item" 
                   [class.unread]="!notification.read"
                   (click)="handleNotificationClick(notification)">
                <div class="notification-icon">
                  <!-- Message Icon -->
                  <svg *ngIf="notification.type === 'message'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  <!-- Missed Call Icon -->
                  <svg *ngIf="notification.type === 'missed-call'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 16.92V19.92C22 20.6204 21.719 21.2922 21.219 21.7922C20.719 22.2922 20.0474 22.5734 19.347 22.5134C15.8482 22.2324 12.4895 21.0003 9.6 18.86C7.21358 17.0896 5.35036 14.7065 4.2 12C3.04964 9.29352 2.66265 6.44787 3.07 3.64C3.13826 2.94623 3.43566 2.29903 3.91368 1.80642C4.39171 1.31381 5.01885 1.00758 5.7 1H8.7C9.29674 0.994966 9.87908 1.16796 10.3813 1.49754C10.8835 1.82712 11.2839 2.29965 11.53 2.86L13.08 6.58C13.2833 7.06943 13.3459 7.60609 13.2612 8.12757C13.1765 8.64906 12.9484 9.13502 12.6 9.53L11 11.13C12.7613 13.3728 15.1272 15.2387 17.37 17L18.97 15.4C19.365 15.0516 19.851 14.8235 20.3724 14.7388C20.8939 14.6541 21.4306 14.7167 21.92 14.92L25.64 16.47C26.1928 16.7132 26.6677 17.1107 26.9989 17.6098C27.3301 18.1088 27.5035 18.6879 27.5 19.28L27.5 22.28C27.4913 22.9658 27.2056 23.6191 26.7058 24.1051C26.206 24.5912 25.5326 24.8734 24.83 24.89C22.8968 24.9587 20.9658 24.7498 19.1 24.27" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 2L22 22M22 2L2 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.8"/>
                  </svg>
                </div>
                <div class="notification-content">
                  <div class="notification-title">{{ notification.title }}</div>
                  <div class="notification-message">{{ notification.message }}</div>
                  <div class="notification-time">{{ getNotificationTime(notification.timestamp) }}</div>
                </div>
                <button class="notification-delete" 
                        (click)="deleteNotification(notification.id, $event)" 
                        title="Delete notification">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Chat Icon - Facebook Style -->
        <div class="chat-menu-container">
          <button class="chat-menu-button" (click)="toggleChatMenu()" [class.active]="showChatMenu" [class.has-unread]="chatUnreadCount > 0" title="Messages">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="chat-menu-badge" *ngIf="chatUnreadCount > 0">{{ chatUnreadCount }}</span>
          </button>
          
          <!-- Blocked Users Panel (from chat menu) -->
          <div class="blocked-users-panel-dropdown" *ngIf="showBlockedUsers && showChatMenu" (click)="$event.stopPropagation()">
            <div class="blocked-users-header-dropdown">
              <h3>Blocked Users</h3>
              <button class="close-blocked-users" (click)="toggleBlockedUsers()">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </button>
            </div>
            
            <div class="blocked-users-content-dropdown">
              <div class="blocked-loading" *ngIf="isLoadingBlockedUsers">
                <p>Loading blocked users...</p>
              </div>
              <div class="blocked-users-list-dropdown" *ngIf="!isLoadingBlockedUsers">
                <div 
                  *ngFor="let user of blockedUsers" 
                  class="blocked-user-item-dropdown">
                  <div class="blocked-user-avatar-dropdown">
                    <img *ngIf="user.avatarUrl" 
                         [src]="userService.getAvatarUrl(user.avatarUrl)" 
                         [alt]="user.firstName + ' ' + user.lastName"
                         class="avatar-image"
                         (error)="onChatImageError($event)">
                    <div class="avatar-circle-dropdown" 
                         [style.display]="user.avatarUrl ? 'none' : 'flex'">
                      {{ user.firstName.charAt(0) }}{{ user.lastName.charAt(0) }}
                    </div>
                  </div>
                  <div class="blocked-user-info-dropdown">
                    <div class="blocked-user-name-dropdown">{{ user.firstName }} {{ user.lastName }}</div>
                    <div class="blocked-user-details-dropdown">
                      <span *ngIf="user.specialization">{{ user.specialization }}</span>
                    </div>
                  </div>
                  <button type="button" class="unblock-button-dropdown" (click)="handleUnblockClick(user, $event)" title="Unblock user">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" pointer-events="none">
                      <path d="M18 6L6 18"></path>
                      <path d="M6 6l12 12"></path>
                    </svg>
                    <span>Unblock</span>
                  </button>
                </div>
                <div class="no-blocked-users-dropdown" *ngIf="blockedUsers.length === 0 && !isLoadingBlockedUsers">
                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                  </svg>
                  <p>No blocked users</p>
                  <span>You haven't blocked anyone yet</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Chat Menu Dropdown (Conversation List) -->
          <div class="chat-menu-dropdown" *ngIf="showChatMenu && !showBlockedUsers" (click)="$event.stopPropagation()">
            <div class="chat-menu-header">
              <h3>Messages</h3>
              <div class="chat-menu-header-actions">
                <button class="chat-menu-blocked-users" (click)="toggleBlockedUsers()" title="Blocked Users">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    <circle cx="18" cy="8" r="2.5"></circle>
                    <line x1="16.5" y1="6.5" x2="19.5" y2="9.5"></line>
                  </svg>
                </button>
                <button class="chat-menu-close" (click)="toggleChatMenu()" title="Close">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
              </div>
            </div>
            <div class="chat-menu-search">
              <div class="search-input-container">
                <svg class="search-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <input 
                  type="text" 
                  class="search-input" 
                  placeholder="Search for people..." 
                  [(ngModel)]="chatSearchQuery"
                  (input)="onChatSearch($event)"
                  (focus)="showChatSearchResults = true">
                <button 
                  *ngIf="chatSearchQuery" 
                  class="search-clear" 
                  (click)="clearChatSearch()"
                  title="Clear search">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
              </div>
            </div>
            <div class="conversation-list-dropdown">
              <!-- Search Results -->
              <div *ngIf="chatSearchQuery && chatSearchResults.length > 0" class="search-results-section">
                <div class="search-results-header">Search Results ({{ chatSearchResults.length }})</div>
                <div *ngFor="let user of chatSearchResults" 
                     class="conversation-item-dropdown"
                     (click)="openChatWithUser(user.userId)">
                  <div class="conversation-avatar-dropdown">
                    <img *ngIf="user.avatarUrl" 
                         [src]="userService.getAvatarUrl(user.avatarUrl)" 
                         [alt]="user.firstName + ' ' + user.lastName"
                         class="avatar-image"
                         (error)="onChatImageError($event)">
                    <div class="avatar-circle-dropdown" 
                         [style.display]="user.avatarUrl ? 'none' : 'flex'">
                      {{ user.firstName.charAt(0) }}{{ user.lastName.charAt(0) }}
                    </div>
                    <div class="online-indicator-dropdown" 
                         [class.online]="user.isOnline && user.status !== 'BUSY' && user.status !== 'OFFLINE'"
                         [class.offline]="!user.isOnline || user.status === 'OFFLINE'"
                         [class.busy]="user.status === 'BUSY'"
                         [title]="user.status || 'OFFLINE'"></div>
                  </div>
                  <div class="conversation-info-dropdown">
                    <div class="conversation-name-dropdown">{{ user.firstName }} {{ user.lastName }}</div>
                    <div class="conversation-preview-dropdown" *ngIf="user.specialization">{{ user.specialization }}</div>
                  </div>
                </div>
              </div>
              
              <!-- Existing Conversations (filtered by search) -->
              <div class="conversations-section">
                <div class="conversations-header" *ngIf="chatSearchQuery && chatComponent?.conversations && (chatComponent?.conversations?.length ?? 0) > 0">Conversations ({{ filteredConversations.length }})</div>
                <div *ngIf="(!chatSearchQuery && (!chatComponent?.conversations || chatComponent?.conversations?.length === 0)) || (chatSearchQuery && (!filteredConversations || filteredConversations.length === 0))" class="no-conversations">
                  <p>{{ chatSearchQuery ? 'No conversations found' : 'No conversations yet' }}</p>
                  <p class="subtext">{{ chatSearchQuery ? 'Try a different search term' : 'Start a conversation to begin messaging' }}</p>
                </div>
                <!-- Show message when searching and no results -->
                <div *ngIf="chatSearchQuery && chatSearchResults.length === 0 && filteredConversations.length === 0 && chatSearchQuery.length >= 2" class="no-conversations">
                  <p>No users found</p>
                  <p class="subtext">Try searching with a different name</p>
                </div>
                <div *ngFor="let conversation of (chatSearchQuery ? filteredConversations : (chatComponent?.conversations || []))" 
                     class="conversation-item-dropdown"
                     [class.active]="chatComponent?.selectedConversation?.otherUserId === conversation.otherUserId"
                     (click)="openChatConversation(conversation.otherUserId)">
                  <div class="conversation-avatar-dropdown">
                    <img *ngIf="conversation.otherUserAvatarUrl" 
                         [src]="userService.getAvatarUrl(conversation.otherUserAvatarUrl)" 
                         [alt]="conversation.otherUserName"
                         class="avatar-image"
                         (error)="onChatImageError($event)">
                    <div class="avatar-circle-dropdown" 
                         [style.display]="conversation.otherUserAvatarUrl ? 'none' : 'flex'">
                      {{ conversation.otherUserName.charAt(0) }}
                    </div>
                    <div class="online-indicator-dropdown" 
                         [class.online]="conversation.isOnline && conversation.otherUserStatus !== 'BUSY' && conversation.otherUserStatus !== 'OFFLINE'"
                         [class.offline]="!conversation.isOnline || conversation.otherUserStatus === 'OFFLINE'"
                         [class.busy]="conversation.otherUserStatus === 'BUSY'"
                         [title]="conversation.otherUserStatus || 'OFFLINE'"></div>
                  </div>
                  <div class="conversation-info-dropdown">
                    <div class="conversation-name-dropdown">{{ conversation.otherUserName }}</div>
                    <div class="conversation-preview-dropdown">{{ conversation.lastMessage?.content || 'No messages yet' }}</div>
                  </div>
                  <div class="conversation-meta-dropdown">
                    <div class="conversation-time-dropdown" *ngIf="conversation.lastMessage?.createdAt">
                      {{ getConversationTime(conversation.lastMessage!.createdAt) }}
                    </div>
                    <div class="conversation-unread-dropdown" *ngIf="conversation.unreadCount > 0">
                      {{ conversation.unreadCount }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Blocked Users Button -->
        <div class="blocked-users-container">
          <button class="blocked-users-button-header" (click)="toggleBlockedUsers($event)" [class.active]="showBlockedUsers" title="Blocked Users">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
              <circle cx="18" cy="8" r="2.5"></circle>
              <line x1="16.5" y1="6.5" x2="19.5" y2="9.5"></line>
            </svg>
          </button>
          
          <!-- Blocked Users Panel (from header) -->
          <div class="blocked-users-panel-dropdown" *ngIf="showBlockedUsers && !showChatMenu" (click)="$event.stopPropagation()">
            <div class="blocked-users-header-dropdown">
              <h3>Blocked Users</h3>
              <button class="close-blocked-users" (click)="toggleBlockedUsers()">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </button>
            </div>
            
            <div class="blocked-users-content-dropdown">
              <div class="blocked-loading" *ngIf="isLoadingBlockedUsers">
                <p>Loading blocked users...</p>
              </div>
              <div class="blocked-users-list-dropdown" *ngIf="!isLoadingBlockedUsers">
                <div 
                  *ngFor="let user of blockedUsers" 
                  class="blocked-user-item-dropdown">
                  <div class="blocked-user-avatar-dropdown">
                    <img *ngIf="user.avatarUrl" 
                         [src]="userService.getAvatarUrl(user.avatarUrl)" 
                         [alt]="user.firstName + ' ' + user.lastName"
                         class="avatar-image"
                         (error)="onChatImageError($event)">
                    <div class="avatar-circle-dropdown" 
                         [style.display]="user.avatarUrl ? 'none' : 'flex'">
                      {{ user.firstName.charAt(0) }}{{ user.lastName.charAt(0) }}
                    </div>
                  </div>
                  <div class="blocked-user-info-dropdown">
                    <div class="blocked-user-name-dropdown">{{ user.firstName }} {{ user.lastName }}</div>
                    <div class="blocked-user-details-dropdown">
                      <span *ngIf="user.specialization">{{ user.specialization }}</span>
                    </div>
                  </div>
                  <button type="button" class="unblock-button-dropdown" (click)="handleUnblockClick(user, $event)" title="Unblock user">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" pointer-events="none">
                      <path d="M18 6L6 18"></path>
                      <path d="M6 6l12 12"></path>
                    </svg>
                    <span>Unblock</span>
                  </button>
                </div>
                <div class="no-blocked-users-dropdown" *ngIf="blockedUsers.length === 0 && !isLoadingBlockedUsers">
                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                  </svg>
                  <p>No blocked users</p>
                  <span>You haven't blocked anyone yet</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <button class="refresh-button" (click)="refresh()" [disabled]="loading" title="Refresh">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 4V10H7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M23 20V14H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14L18.36 18.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>Refresh</span>
        </button>
        
        <!-- Profile Dropdown -->
        <div class="profile-menu-container">
          <button class="profile-menu-button" (click)="toggleProfileMenu()" [class.active]="showProfileMenu" title="Profile">
            <div class="profile-avatar-small">
              <img *ngIf="currentUser?.avatarUrl" 
                   [src]="userService.getAvatarUrl(currentUser?.avatarUrl || '')" 
                   [alt]="(currentUser?.firstName || '') + ' ' + (currentUser?.lastName || '')"
                   class="avatar-image-small"
                   (error)="onImageError($event)">
              <div class="avatar-circle-small" 
                   [style.display]="currentUser?.avatarUrl ? 'none' : 'flex'">
                {{ currentUser?.firstName?.charAt(0) }}{{ currentUser?.lastName?.charAt(0) }}
              </div>
            </div>
            <svg class="chevron-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          
          <!-- Profile Dropdown Menu -->
          <div class="profile-dropdown" *ngIf="showProfileMenu" (click)="$event.stopPropagation()">
            <div class="profile-dropdown-header">
              <div class="profile-avatar-medium">
                <img *ngIf="currentUser?.avatarUrl" 
                     [src]="userService.getAvatarUrl(currentUser?.avatarUrl || '')" 
                     [alt]="(currentUser?.firstName || '') + ' ' + (currentUser?.lastName || '')"
                     class="avatar-image-medium"
                     (error)="onImageError($event)">
                <div class="avatar-circle-medium" 
                     [style.display]="currentUser?.avatarUrl ? 'none' : 'flex'">
                  {{ currentUser?.firstName?.charAt(0) }}{{ currentUser?.lastName?.charAt(0) }}
                </div>
              </div>
              <div class="profile-dropdown-info">
                <div class="profile-dropdown-name">Dr. {{ currentUser?.firstName }} {{ currentUser?.lastName }}</div>
                <div class="profile-dropdown-email">{{ currentUser?.email }}</div>
              </div>
            </div>
            <div class="profile-dropdown-divider"></div>
            <div class="profile-dropdown-menu">
              <button class="profile-menu-item" (click)="setTab('profile'); showProfileMenu = false">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>View Profile</span>
              </button>
              <button class="profile-menu-item" (click)="setTab('security'); showProfileMenu = false">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>Security Settings</span>
              </button>
              <div class="profile-dropdown-divider"></div>
              <button class="profile-menu-item logout-item" (click)="logout(); showProfileMenu = false">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M16 17L21 12L16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M21 12H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>Logout</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="dashboard-main">
    <!-- Loading State -->
    <div class="loading-container" *ngIf="loading">
      <div class="spinner-wrapper">
        <svg class="spinner" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" stroke-opacity="0.25"/>
          <path d="M12 2C16.4183 2 20 5.58172 20 10" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
        </svg>
      </div>
      <p class="loading-text">Loading dashboard...</p>
    </div>

    <!-- Error State -->
    <div class="error-container" *ngIf="error && !loading">
      <div class="error-card">
        <svg class="error-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
          <path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <div class="error-content">
          <h3>Error</h3>
          <p>{{ error }}</p>
          <button class="retry-button" (click)="refresh()">Try Again</button>
        </div>
      </div>
    </div>

    <!-- Sidebar and Content Layout -->
    <div class="dashboard-layout" *ngIf="!loading && !error">
      <!-- Left Sidebar - Tabs Navigation -->
      <aside class="sidebar-navigation">
        <nav class="tabs-container">
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'overview'"
        (click)="setTab('overview')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9 22V12H15V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Overview
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'appointments'"
        (click)="setTab('appointments')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Appointments
        <span class="tab-badge">{{ getTotalAppointments() }}</span>
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'create'"
        (click)="setTab('create')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Create Appointment
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'availability'"
        (click)="setTab('availability')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Availability
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'patients'"
        (click)="setTab('patients')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Patients
        <span class="tab-badge">{{ patients.length }}</span>
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'ehr'"
        (click)="setTab('ehr')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M14 7H16M14 11H16M14 15H16M10 7H12M10 11H12M10 15H12M6 7H8M6 11H8M6 15H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        EHR Management
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'prescriptions'"
        (click)="setTab('prescriptions')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Prescriptions
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'safety'"
        (click)="setTab('safety')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L2 7V10C2 16 6 21.4 12 22C18 21.4 22 16 22 10V7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Safety Alerts
        <span class="tab-badge critical" *ngIf="unacknowledgedAlertsCount > 0">{{ unacknowledgedAlertsCount }}</span>
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'security'"
        (click)="setTab('security')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Security
      </button>
        </nav>
      </aside>

      <!-- Right Content Area -->
      <div class="content-area">
        <!-- Tab Content -->
        <div class="tab-content">
      <!-- Overview Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'overview'">
        <section class="stats-section">
          <h2 class="section-title">Dashboard Overview</h2>
          <div class="stats-grid">
            <div class="stat-card stat-card-primary">
              <div class="stat-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
              <div class="stat-content">
                <p class="stat-label">Total Appointments</p>
                <p class="stat-value">{{ getTotalAppointments() }}</p>
              </div>
            </div>

            <div class="stat-card stat-card-success">
              <div class="stat-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" stroke-width="2"/>
                  <path d="M9 14L11 16L15 12" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
              <div class="stat-content">
                <p class="stat-label">Upcoming</p>
                <p class="stat-value">{{ getUpcomingCount() }}</p>
              </div>
            </div>

            <div class="stat-card stat-card-info">
              <div class="stat-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="stat-content">
                <p class="stat-label">Completed</p>
                <p class="stat-value">{{ getCompletedCount() }}</p>
              </div>
            </div>

            <div class="stat-card stat-card-warning">
              <div class="stat-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="stat-content">
                <p class="stat-label">Patients</p>
                <p class="stat-value">{{ patients.length }}</p>
              </div>
            </div>
          </div>
        </section>

        <!-- Quick Actions -->
        <section class="quick-actions-section">
          <h2 class="section-title">Quick Actions</h2>
          <div class="actions-grid">
            <button class="action-card" (click)="setTab('create')">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <h3>Create Appointment</h3>
              <p>Schedule a new appointment for a patient</p>
            </button>
            <button class="action-card" (click)="setTab('availability')">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="currentColor" stroke-width="2"/>
                <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2"/>
              </svg>
              <h3>Manage Availability</h3>
              <p>Set your working hours and availability</p>
            </button>
          </div>
        </section>
      </div>

      <!-- Appointments Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'appointments'">
        <app-appointments 
          [appointments]="appointments"
          [error]="error"
          (refreshRequested)="refresh()">
        </app-appointments>
      </div>

      <!-- Create Appointment Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'create'">
        <app-create-appointment
          [patients]="patients"
          [doctorId]="doctorId"
          [selectedPatientId]="selectedPatientId"
          (appointmentCreated)="refresh()">
        </app-create-appointment>
      </div>


      <!-- Availability Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'availability'">
        <app-availability
          [doctorId]="doctorId"
          (availabilityChanged)="loadAvailability()">
        </app-availability>
      </div>

      <!-- Patients Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'patients'">
        <app-patients 
          [patients]="patients" 
          (patientRemoved)="handlePatientRemoved()"
          (patientSelected)="selectPatient($event?.id)"
          (createAppointmentRequested)="handleCreateAppointmentRequest($event)"
          (startChatRequested)="handleStartChatRequest($event)">
        </app-patients>
      </div>

      <!-- Profile Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'profile'">
        <app-profile
          [currentUser]="currentUser"
          [doctorProfile]="doctorProfile"
          [showEditProfile]="showEditProfile"
          (editProfileClick)="editProfile()"
          (updateProfile)="updateDoctorProfile($event)"
          (fileSelected)="onFileSelected($event)">
        </app-profile>
      </div>

      <!-- EHR Management Tab Panel -->
      <div class="tab-panel" *ngIf="activeTab === 'ehr'">
        <app-ehr
          [doctorId]="doctorId"
          [selectedPatientId]="selectedPatientId"
          [patients]="patients"
          (patientSelected)="selectPatient($event)"
          (dataChanged)="loadAllDoctorRecords()">
        </app-ehr>
      </div>

      <!-- Prescriptions Tab Panel -->
      <div class="tab-panel" *ngIf="activeTab === 'prescriptions'">
        <app-prescriptions
          (safetyCheckRequested)="handleSafetyCheckRequest()"
          [doctorId]="doctorId"
          [selectedPatientId]="selectedPatientId"
          [prescriptions]="prescriptions"
          [patients]="patients"
          (prescriptionChanged)="refreshPrescriptions()"
          (patientSelected)="selectPatient($event)">
        </app-prescriptions>
      </div>

      <!-- Safety Alerts Tab Panel -->
      <div class="tab-panel" *ngIf="activeTab === 'safety'">
        <div class="safety-alerts-container">
          <div class="safety-header">
            <h2>Patient Safety Alerts</h2>
            <div class="header-actions">
              <button class="btn-create" (click)="toggleCreateAlertForm()" [class.active]="showCreateAlertForm">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
                  <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
                {{ showCreateAlertForm ? 'Cancel' : 'Create Alert' }}
              </button>
              <button class="refresh-btn" (click)="loadSafetyAlerts()" title="Refresh alerts">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                  <path d="M1 4V10H7M23 20V14H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14L18.36 18.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>
          </div>

          <!-- Create Alert Form -->
          <div class="create-alert-section" *ngIf="showCreateAlertForm">
            <h3>Create New Clinical Alert</h3>
            <form class="alert-form" (ngSubmit)="createClinicalAlert()">
              <div class="form-group">
                <label for="alert-patient">Patient <span class="required">*</span></label>
                <select id="alert-patient" [(ngModel)]="newAlert.patientId" name="patientId" required>
                  <option value="">Select a patient</option>
                  <option *ngFor="let patient of patients" [value]="patient.id">
                    {{ patient.firstName }} {{ patient.lastName }} ({{ patient.email }})
                  </option>
                </select>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label for="alert-type">Alert Type <span class="required">*</span></label>
                  <select id="alert-type" [(ngModel)]="newAlert.alertType" name="alertType" required>
                    <option value="DRUG_INTERACTION">Drug Interaction</option>
                    <option value="ALLERGY">Allergy</option>
                    <option value="CONTRAINDICATION">Contraindication</option>
                    <option value="OVERDOSE_RISK">Overdose Risk</option>
                    <option value="DUPLICATE_THERAPY">Duplicate Therapy</option>
                    <option value="DOSE_ADJUSTMENT">Dose Adjustment</option>
                    <option value="LAB_RESULT_ALERT">Lab Result Alert</option>
                    <option value="VITAL_SIGN_ALERT">Vital Sign Alert</option>
                    <option value="COMPLIANCE_ALERT">Compliance Alert</option>
                    <option value="OTHER">Other</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="alert-severity">Severity <span class="required">*</span></label>
                  <select id="alert-severity" [(ngModel)]="newAlert.severity" name="severity" required>
                    <option value="INFO">Info</option>
                    <option value="WARNING">Warning</option>
                    <option value="CRITICAL">Critical</option>
                  </select>
                </div>
              </div>

              <div class="form-group">
                <label for="alert-title">Title <span class="required">*</span></label>
                <input 
                  type="text" 
                  id="alert-title" 
                  [(ngModel)]="newAlert.title" 
                  name="title" 
                  placeholder="e.g., Drug Interaction Detected"
                  required
                />
              </div>

              <div class="form-group">
                <label for="alert-description">Description <span class="required">*</span></label>
                <textarea 
                  id="alert-description" 
                  [(ngModel)]="newAlert.description" 
                  name="description" 
                  placeholder="Describe the alert in detail..."
                  rows="4"
                  required
                ></textarea>
              </div>

              <div class="form-group">
                <label for="alert-medication">Medication Name (Optional)</label>
                <input 
                  type="text" 
                  id="alert-medication" 
                  [(ngModel)]="newAlert.medicationName" 
                  name="medicationName" 
                  placeholder="e.g., Warfarin, Aspirin"
                />
              </div>

              <div class="form-actions">
                <button type="button" class="btn-cancel" (click)="toggleCreateAlertForm()">
                  Cancel
                </button>
                <button type="submit" class="btn-submit">
                  Create Alert
                </button>
              </div>
            </form>
          </div>

          <!-- Clinical Alerts Section -->
          <div class="alerts-section">
            <h3>
              Clinical Alerts
              <span class="badge" *ngIf="unacknowledgedAlerts.length > 0">{{ unacknowledgedAlerts.length }}</span>
            </h3>
            
            <div *ngIf="unacknowledgedAlerts.length === 0" class="no-alerts">
              <p>No unacknowledged clinical alerts</p>
            </div>
            
            <div *ngFor="let alert of unacknowledgedAlerts" class="alert-card" [ngClass]="'severity-' + alert.severity.toLowerCase()">
              <div class="alert-header">
                <div class="alert-type">
                  <span class="severity-badge" [ngClass]="'severity-' + alert.severity.toLowerCase()">
                    {{ alert.severity }}
                  </span>
                  <span class="alert-type-label">{{ alert.alertType.replace('_', ' ') }}</span>
                </div>
                <span class="alert-time">{{ getRelativeTime(alert.createdAt) }}</span>
              </div>
              <div class="alert-body">
                <h4 class="alert-title">{{ alert.title }}</h4>
                <p class="alert-description">{{ alert.description }}</p>
                <div class="alert-meta">
                  <span *ngIf="alert.patientName" class="patient-name">
                    <strong>Patient:</strong> {{ alert.patientName }}
                  </span>
                  <span *ngIf="alert.medicationName" class="medication">
                    <strong>Medication:</strong> {{ alert.medicationName }}
                  </span>
                </div>
              </div>
              <div class="alert-actions">
                <button class="btn-acknowledge" (click)="acknowledgeClinicalAlert(alert.id)">
                  Acknowledge
                </button>
                <button class="btn-resolve" (click)="resolveClinicalAlert(alert.id)">
                  Resolve
                </button>
              </div>
            </div>
          </div>

          <!-- Critical Lab Results Section -->
          <div class="alerts-section">
            <h3>
              Critical Lab Results
              <span class="badge" *ngIf="unacknowledgedCriticalResults.length > 0">{{ unacknowledgedCriticalResults.length }}</span>
            </h3>
            
            <div *ngIf="unacknowledgedCriticalResults.length === 0" class="no-alerts">
              <p>No unacknowledged critical lab results</p>
            </div>
            
            <div *ngFor="let result of unacknowledgedCriticalResults" class="alert-card critical-result">
              <div class="alert-header">
                <div class="alert-type">
                  <span class="severity-badge severity-critical">
                    {{ result.criticalityLevel }}
                  </span>
                  <span class="alert-type-label">{{ result.testName }}</span>
                </div>
                <span class="alert-time">{{ getRelativeTime(result.createdAt) }}</span>
              </div>
              <div class="alert-body">
                <h4 class="alert-title">Critical Lab Result</h4>
                <div class="lab-result-details">
                  <div class="detail-row" *ngIf="result.resultValue">
                    <strong>Result Value:</strong> {{ result.resultValue }}
                  </div>
                  <div class="detail-row" *ngIf="result.referenceRange">
                    <strong>Reference Range:</strong> {{ result.referenceRange }}
                  </div>
                  <div class="detail-row" *ngIf="result.clinicalSignificance">
                    <strong>Clinical Significance:</strong> {{ result.clinicalSignificance }}
                  </div>
                  <div class="detail-row" *ngIf="result.patientName">
                    <strong>Patient:</strong> {{ result.patientName }}
                  </div>
                </div>
              </div>
              <div class="alert-actions">
                <button class="btn-acknowledge" (click)="acknowledgeCriticalResult(result.id)">
                  Acknowledge
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Security/2FA Tab Panel -->
      <div class="tab-panel" *ngIf="activeTab === 'security'">
        <app-security
          [twoFAEnabled]="twoFAEnabled"
          [twoFAStatus]="twoFAStatus"
          (setup2FA)="setup2FA()"
          (disable2FA)="disable2FA($event)">
        </app-security>
      </div>
        </div>
      </div>
    </div>
  </main>
  
  <!-- Call Component - Always visible for incoming/outgoing calls -->
  <app-call></app-call>
  
  <!-- Facebook-style Chat Widget -->
  <!-- Always render chat component but hide it when closed -->
  <div class="chat-widget-container" [class.hidden]="!showChatWidget">
    <div class="chat-widget-header">
      <div class="chat-widget-title" (click)="toggleChatWidget()">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>Messages</span>
        <span class="chat-widget-badge" *ngIf="chatUnreadCount > 0">{{ chatUnreadCount }}</span>
      </div>
      
      <!-- Chat Action Buttons -->
      <div class="chat-widget-actions" (click)="$event.stopPropagation()">
        <button class="chat-action-btn call-btn" 
                [class.disabled]="!chatComponent?.selectedConversation || !chatComponent?.selectedConversation?.isOnline || chatComponent?.selectedConversation?.otherUserStatus === 'OFFLINE'"
                (click)="chatComponent?.startAudioCall()" 
                [title]="!chatComponent?.selectedConversation ? 'Select a conversation first' : (!chatComponent?.selectedConversation?.isOnline || chatComponent?.selectedConversation?.otherUserStatus === 'OFFLINE') ? 'User is offline' : 'Audio call'"
                [disabled]="!chatComponent?.selectedConversation || !chatComponent?.selectedConversation?.isOnline || chatComponent?.selectedConversation?.otherUserStatus === 'OFFLINE'">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 16.92V19.92C22 20.6204 21.719 21.2922 21.219 21.7922C20.719 22.2922 20.0474 22.5734 19.347 22.5134C15.8482 22.2324 12.4895 21.0003 9.6 18.86C7.21358 17.0896 5.35036 14.7065 4.2 12C3.04964 9.29352 2.66265 6.44787 3.07 3.64C3.13826 2.94623 3.43566 2.29903 3.91368 1.80642C4.39171 1.31381 5.01885 1.00758 5.7 1H8.7C9.29674 0.994966 9.87908 1.16796 10.3813 1.49754C10.8835 1.82712 11.2839 2.29965 11.53 2.86L13.08 6.58C13.2833 7.06943 13.3459 7.60609 13.2612 8.12757C13.1765 8.64906 12.9484 9.13502 12.6 9.53L11 11.13C12.7613 13.3728 15.1272 15.2387 17.37 17L18.97 15.4C19.365 15.0516 19.851 14.8235 20.3724 14.7388C20.8939 14.6541 21.4306 14.7167 21.92 14.92L25.64 16.47C26.1928 16.7132 26.6677 17.1107 26.9989 17.6098C27.3301 18.1088 27.5035 18.6879 27.5 19.28L27.5 22.28C27.4913 22.9658 27.2056 23.6191 26.7058 24.1051C26.206 24.5912 25.5326 24.8734 24.83 24.89C22.8968 24.9587 20.9658 24.7498 19.1 24.27" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <button class="chat-action-btn video-call-btn" 
                [class.disabled]="!chatComponent?.selectedConversation || !chatComponent?.selectedConversation?.isOnline || chatComponent?.selectedConversation?.otherUserStatus === 'OFFLINE'"
                (click)="chatComponent?.startVideoCall()" 
                [title]="!chatComponent?.selectedConversation ? 'Select a conversation first' : (!chatComponent?.selectedConversation?.isOnline || chatComponent?.selectedConversation?.otherUserStatus === 'OFFLINE') ? 'User is offline' : 'Video call'"
                [disabled]="!chatComponent?.selectedConversation || !chatComponent?.selectedConversation?.isOnline || chatComponent?.selectedConversation?.otherUserStatus === 'OFFLINE'">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M23 7L16 12L23 17V7Z" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M14 5H3C1.89543 5 1 5.89543 1 7V17C1 18.1046 1.89543 19 3 19H14C15.1046 19 16 18.1046 16 17V7C16 5.89543 15.1046 5 14 5Z" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <button class="chat-action-btn delete-btn" 
                (click)="chatComponent?.deleteConversation()" 
                [class.disabled]="!chatComponent?.selectedConversation"
                [title]="!chatComponent?.selectedConversation ? 'Select a conversation first' : 'Delete all messages'"
                [disabled]="!chatComponent?.selectedConversation">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M3 6H5H21" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
      
      <button class="chat-widget-close" (click)="toggleChatWidget()">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </button>
    </div>
    <div class="chat-widget-content">
      <app-chat></app-chat>
    </div>
  </div>
  
</div>
