.dock {
  position: fixed;
  z-index: 24;
  left: max(var(--space-4), env(safe-area-inset-left));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(288px, calc(100vw - var(--space-6)));
  padding: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.profile {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile:hover,
.profile:focus-visible {
  background: var(--accent-soft);
}

.profile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.avatar,
.avatarFallback {
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-avatar);
  object-fit: cover;
}

.avatarFallback {
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.profileText {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.profileName,
.username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profileName {
  font-size: 13px;
  font-weight: 600;
}

.username {
  color: var(--text-dim);
  font-size: 11px;
}

.settings {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

@media (width <= 899px) {
  .dock {
    left: max(var(--space-2), env(safe-area-inset-left));
    bottom: calc(88px + env(safe-area-inset-bottom));
    gap: var(--space-1);
    width: auto;
    padding: var(--space-1);
  }

  .profile {
    flex: 0 0 40px;
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
  }

  .avatar,
  .avatarFallback {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .profileText {
    display: none;
  }

  .settings {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}