@if (visible()) {
  <div class="collab-toolbar" cdkDrag cdkDragBoundary="body">

    <!-- Session Info — drag handle -->
    <div class="collab-toolbar__session-info" cdkDragHandle>
      <span class="collab-toolbar__dot"
            [class.connected]="isConnected() && !isReconnecting()"
            [class.reconnecting]="isReconnecting()"
            [class.disconnected]="!isConnected() && !isReconnecting()">
      </span>
      <span class="collab-toolbar__code">{{ sessionCode() }}</span>
      <span class="collab-toolbar__count">
        {{ participantCount() }} {{ 'collabspace.toolbar.live' | transloco }}
      </span>
    </div>

    <span class="collab-toolbar__divider"></span>

    <!-- Mode buttons -->
    <button type="button"
            class="collab-toolbar__btn"
            [class.active]="!isScreenSharing()"
            [attr.title]="'collabspace.toolbar.coBrowse' | transloco">
      <mat-icon>language</mat-icon>
    </button>
    <button type="button"
            class="collab-toolbar__btn"
            [class.active]="isScreenSharing()"
            [class.danger]="isScreenSharing()"
            (click)="toggleScreenShare()"
            [attr.title]="'collabspace.toolbar.screenShare' | transloco">
      <mat-icon>present_to_all</mat-icon>
    </button>

    <span class="collab-toolbar__divider"></span>

    <!-- Action buttons -->
    <button type="button"
            class="collab-toolbar__btn"
            [class.active]="isChatOpen()"
            (click)="uiState.toggleChat()"
            [attr.title]="'collabspace.toolbar.chat' | transloco">
      <mat-icon>chat</mat-icon>
      @if (chatBadge() > 0) {
        <span class="collab-toolbar__badge">{{ chatBadge() }}</span>
      }
    </button>
    <button type="button"
            class="collab-toolbar__btn"
            [class.active]="isAnnotating()"
            (click)="uiState.toggleAnnotateMode()"
            [attr.title]="'collabspace.toolbar.annotate' | transloco">
      <mat-icon>edit</mat-icon>
    </button>
    <button type="button"
            class="collab-toolbar__btn"
            (click)="uiState.openDetailPanel()"
            [attr.title]="'collabspace.toolbar.participants' | transloco">
      <mat-icon>people</mat-icon>
    </button>

    <span class="collab-toolbar__divider"></span>

    <!-- Elapsed timer + End Session -->
    <span class="collab-toolbar__timer">{{ elapsed() }}</span>
    <button type="button"
            class="collab-toolbar__btn collab-toolbar__btn--end"
            (click)="endSession()"
            [attr.title]="'collabspace.toolbar.endSession' | transloco">
      <mat-icon>call_end</mat-icon>
      <span class="collab-toolbar__btn-label">{{ 'collabspace.toolbar.end' | transloco }}</span>
    </button>

  </div>
}